Pure CSS (-_-) I See U

index.html

<ol class="sensor">
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ol>
<main class="viewport">
    <section class="box">
        <li class="face">1</li>
        <li class="face">2</li>
        <li class="face">3</li>
        <li class="face">4</li>
        <li class="face">5</li>
        <li class="face">6</li>
        <li class="face">7</li>
        <li class="face">8</li>
        <li class="face">9</li>
        <li class="face">10</li>
        <li class="face">11</li>
        <li class="face">12</li>
    </section>
</main>

pure-css-_-i-see-u.markdown

Pure CSS (-_-) I See U

An eye follows the cursor with CSS only.

The radial sensor was built with the same idea of: https://codepen.io/9am/pen/zYygxKq

A Pen by Stan Williams on CodePen.

License.

style.css

/* */
:root {
    --color: darkblue;
    /* sensor */
    --num: 12;
    --partial: calc(1turn / var(--num));
    --i: 0;
    --angle: calc(var(--partial) * var(--i));
    height: 100%;
    animation: 5s infinite look-around;
}

:root:hover {
    animation: unset;
}

body {
    height: 100%;
    display: grid;
    place-content: center;
    place-items: center;
    overflow: hidden;
}

body > * {
    grid-area: 1 / 1;
}

.viewport {
    perspective: 400px;
    border-radius: 50%;
    outline: 1px solid var(--color);
    pointer-events: none;
}

.box {
    width: 100px;
    aspect-ratio: 1;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateZ(calc(var(--angle) - 90deg))
        rotateY(calc(70deg - var(--j) * 15deg));
    transition: transform 200ms;
}
.face {
    --stop: 60deg;
    --offset: calc((180deg - var(--stop)) / var(--num));
    --deg: calc(var(--stop) + var(--offset) * var(--n));
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: inherit;
    font-size: 0;
    background: var(--color);
    transform: translateZ(calc(cos(var(--deg)) * 50px)) scale(sin(var(--deg)));
}
.face:nth-child(odd) {
    background: white;
}
.face:last-child {
    --n: -1;
    filter: drop-shadow(0 0 10px var(--color));
    transform: translateZ(calc(cos(var(--deg)) * 50px)) scale(sin(var(--deg)))
        scale(0.4);
}

/* sensor */
ol {
    --r: 50%;
    position: relative;
    width: 100vmax;
    aspect-ratio: 1;
    outline: 1px solid;
}

li {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    --x: calc(50% + sin(var(--partial)) * var(--r));
    --y: calc(50% - cos(var(--partial)) * var(--r));
    clip-path: polygon(50% 50%, 50% 0%, var(--x) var(--y));
    transform: rotate(calc(var(--partial) * (var(--n) - 0.5)));
}

li li {
    --size: calc(50% - 12.5% * var(--n));
    clip-path: circle(var(--size));
    background: rgba(0 0 255 / 0.2);
    background: unset;
    transform: unset;
}


/* counter */
li:nth-child(1)  { --n:  0; }
li:nth-child(2)  { --n:  1; }
li:nth-child(3)  { --n:  2; }
li:nth-child(4)  { --n:  3; }
li:nth-child(5)  { --n:  4; }
li:nth-child(6)  { --n:  5; }
li:nth-child(7)  { --n:  6; }
li:nth-child(8)  { --n:  7; }
li:nth-child(9)  { --n:  8; }
li:nth-child(10) { --n:  9; }
li:nth-child(11) { --n: 10; }
li:nth-child(12) { --n: 11; }

:root:has(ol > li:nth-child(1):hover)  { --i:  0; }
:root:has(ol > li:nth-child(2):hover)  { --i:  1; }
:root:has(ol > li:nth-child(3):hover)  { --i:  2; }
:root:has(ol > li:nth-child(4):hover)  { --i:  3; }
:root:has(ol > li:nth-child(5):hover)  { --i:  4; }
:root:has(ol > li:nth-child(6):hover)  { --i:  5; }
:root:has(ol > li:nth-child(7):hover)  { --i:  6; }
:root:has(ol > li:nth-child(8):hover)  { --i:  7; }
:root:has(ol > li:nth-child(9):hover)  { --i:  8; }
:root:has(ol > li:nth-child(10):hover) { --i:  9; }
:root:has(ol > li:nth-child(11):hover) { --i: 10; }
:root:has(ol > li:nth-child(12):hover) { --i: 11; }

:root:has(ul > li:nth-child(1):hover)  { --j:  0; }
:root:has(ul > li:nth-child(2):hover)  { --j:  1; }
:root:has(ul > li:nth-child(3):hover)  { --j:  2; }
:root:has(ul > li:nth-child(4):hover)  { --j:  3; }

@keyframes look-around {
    0% {
        --i: 10;
        --j: 0;
    }
    25% {
        --i: 5;
        --j: 1;
    }
    50% {
        --i: unset;
        --j: 0;
    }
    75% {
        --i: 2;
        --j: 3;
    }
    100% {
        --i: 6;
        --j: 3;
    }
}