< Back to Frontend Friday Folks Index

Tambourine

Highlighted solution (942 characters)
1 
<div id=r>
2 
  <div class="j a"></div>
3 
  <div class="j b"></div>
4 
  <div class="j c"></div>
5 
  <div class="j d"></div>
6 
  <div class="j e"></div>
7 
</div>
8 
<style>
9 
  body {
10 
    display: grid;
11 
    place-items: center;
12 
    background: #6592CF;
13 
  }
14 
  div {
15 
    border-radius: 50%;
16 
    box-sizing: border-box;
17 
  }
18 
  #r {
19 
    position: relative;
20 
    margin-top: 20px;
21 
    width: 170px;
22 
    height: 170px;
23 
    background:
24 
      radial-gradient(circle at 50% 185px,#6592CF 50px, #243D83 0 60px, #0000 0),
25 
      radial-gradient(#0000 75px, #243D83 0 85px, #0000 0)
26 
    ;
27 
  }
28 
  .j {
29 
    position: absolute;
30 
    width: 50px;
31 
    height: 50px;
32 
    border: 10px solid #243D83;
33 
    background: radial-gradient(#243D83 5px, #6592CF 0)
34 
  }
35 
  .a {
36 
    left: -10px;
37 
    top: 90px;
38 
  }
39 
  .b {
40 
    left: -10px;
41 
    top: 20px;
42 
  }
43 
  .c {
44 
    left: 60px;
45 
    top: -20px;
46 
  }
47 
  .d {
48 
    right: -10px;
49 
    top: 20px;
50 
  }
51 
  .e {
52 
    right: -10px;
53 
    top: 90px;
54 
  }
55 
</style>
Sometimes, repeating divs and moving them around seems to be the most simple solution. There may be a background repeat solution for the "jingles" (or "zils" as we learned from ChatGPT).
< Back to Frontend Friday Folks Index