Impossible carved cubes (1 line of html, 3 elements of css) WOW!

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.

1717133938378.png


@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%);
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,444
Messages
2,571,709
Members
48,796
Latest member
Greg L.
Top