< 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