- Joined
- Jul 4, 2023
- Messages
- 609
- Reaction score
- 81
I have strongly recommended to visit Josetxu's all pens on his codepen, especially: Impossible carved cubes.
@Josetxu - Impossible Carved Cubes
HTML:<div class="content"></div>
CSS::root { --c0: #161616; --c1: #efefef; --c2: #c9c9c9; --c3: #858585; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--c0); } .content { width: 50vmin; height: 74.5vmin; position: relative; background: conic-gradient(from 262deg at 52.5% 9.9%, var(--c1) 0 98deg, #fff0 0 100%), conic-gradient(from 262deg at 18% 38.65%, var(--c1) 0 98deg, #fff0 0 100%), conic-gradient(from 299deg at 47.5% 24%, var(--c2) 0 61deg, #fff0 0 100%), conic-gradient(from 262deg at 47.5% 35.525%, var(--c3) 0 98deg, #fff0 0 100%), conic-gradient(from 262deg at 52.5% 23.525%, var(--c2) 0 98deg, #fff0 0 100%), conic-gradient(from 262deg at 52.5% 35%, var(--c0) 0 98deg, #fff0 0 100%), conic-gradient(from 82deg at 47.5% 89.9%, var(--c1) 0 98deg, #fff0 0 100%), conic-gradient(from 82deg at 82% 61.65%, var(--c1) 0 98deg, #fff0 0 100%), conic-gradient(from 119deg at 52.5% 76%, var(--c2) 0 61deg, #fff0 0 100%), conic-gradient(from 82deg at 52.5% 64.525%, var(--c3) 0 98deg, #fff0 0 100%), conic-gradient(from 82deg at 47.5% 76.525%, var(--c2) 0 98deg, #fff0 0 100%), conic-gradient(from 82deg at 47.5% 65%, var(--c0) 0 98deg, #fff0 0 100%), conic-gradient(from 82deg at 36% 58%, var(--c1) 0 98deg, var(--c3) 0 217deg, #fff0 0 100%), conic-gradient(from 0deg at 64% 42%, var(--c3) 0 119deg, var(--c2) 0 262deg, var(--c1) 0 360deg, #fff0 0 100%); } .content:before { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(171deg, #fff0 0 0.75vmin, var(--c0) calc(0.75vmin + 1px) 9.1vmin, #fff0 calc(9.1vmin + 1px) 31vmin, var(--c0) calc(31vmin + 1px) 39.35vmin, #fff0 calc(39.35vmin + 1px) 100%), repeating-conic-gradient(#0003 0.000001%, #fff0 .00005%, #fff0 .00035%, #fff0 .00005%), repeating-conic-gradient(#fff2 0.00002%, #fff0 .00008%, #fff0 .0008%, #fff0 .00008%); background-repeat: no-repeat; background-size: 4.75% 54%, 100% 100%, 100% 100%; background-position: 50% 50%, 0 0, 0 0; } .content:after { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(-8.25deg, var(--c0) 0 5.2vmin, #fff0 0 75.7vmin, var(--c0) 0 100%), linear-gradient(28.5deg, var(--c0) 0 9.2vmin, #fff0 0 80.2vmin, var(--c0) 0 100%), linear-gradient(90deg, var(--c0) 0 3.5vmin, #fff0 0 46.5vmin, var(--c0) 0 100%); }