< Back to Frontend Friday Folks Index

Black Widow logo

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

At JSCraftCamp 2025, we went with this one and tried out different ways. In the end, we even animated it.

Highlighted solution (1094 characters)
1 
<div><p hourglass></p></div>
2 
<style>
3 
  body {
4 
    display:grid;
5 
    place-items:center;
6 
    background:#151917;
7 
  }
8 
  div {
9 
    width: 210px;
10 
    height: 210px;
11 
    border: 20px solid #D83A34;
12 
    border-radius: 50%;
13 
    display: grid;
14 
    place-items: center;
15 
  }
16 
  [hourglass] {
17 
    --rotation-angle: 0deg;
18 
    position: absolute;
19 
    top: 64px;
20 
    border: 63.3px solid transparent;
21 
    border-top: 94.5px solid #D83A34;
22 
    border-bottom: 0;
23 
    -webkit-box-reflect: below -50px;
24 
    transform-origin: 50% 70px;
25 
    animation: glass 5s infinite linear;
26 
    transform: rotate(var(--rotation-angle)) scale(var(--scale));
27 
  }
28
29 
@property --rotation-angle {
30 
  syntax: "<angle>";
31 
  inherits: false;
32 
  initial-value: 0deg;
33 
}
34 
@property --scale {
35 
  syntax: "<percentage>";
36 
  inherits: false;
37 
  initial-value: 100%;
38 
}
39 
  @keyframes glass {
40 
    0%,10% {
41 
      --rotation-angle: 0deg;
42 
      --scale: 100%;
43 
    }
44 
    20% {
45 
      --scale: 200%;
46 
    }
47 
    30%,70% {
48 
      --rotation-angle: 180deg;
49 
    }
50 
    80% {
51 
      --scale: 100%;
52 
    }
53 
    90%,100% {
54 
      --rotation-angle: 360deg;
55 
    }
56 
  }
57 
</style>

This is an animation as someone asked about animations. We added custom properties so you can actually animate the rotation degree through a variable.

< Back to Frontend Friday Folks Index