< Back to Frontend Friday Folks Index

Notes

Highlighted solution (971 characters)
1 
<div></div>
2 
<style>
3 
  body{display:grid;place-items:center;background:#191919}
4 
  div {
5 
    width: 290;
6 
    height: 120;
7 
    background:
8 
      radial-gradient(ellipse,#FE5F55 25px,#0000 0) 185px 60px / 100px 80px no-repeat,
9 
      radial-gradient(ellipse,#A64942 25px,#0000 0) 115px 60px / 100px 80px no-repeat,
10 
      radial-gradient(ellipse,#FE5F55 25px,#0000 0) 45px 60px / 100px 80px no-repeat,
11 
      radial-gradient(ellipse,#FE5F55 25px,#0000 0) -25px 60px / 100px 80px no-repeat,
12 
      linear-gradient(to right,#0000 40px,#FE5F55 0 120px,#0000 0 180px,#A64942 0 220px,#0000 0 250px,#FE5F55 0 290px,#0000 0) 100% -110px no-repeat,
13 
      linear-gradient(to right,#0000 40px,#FE5F55 0 50px,#0000 0 110px,#FE5F55 0 120px,#0000 0 180px,#A64942 0 190px,#0000 0 250px,#FE5F55 0 260px,#0000 0) 100% -20px no-repeat,
14 
      linear-gradient(#0000 10px,#191919 0 20px,#0000 0),
15 
      linear-gradient(to right,#0000 260px,#FE5F55 0 290px,#0000 0) 100% -90px no-repeat;
16 
  }
17 
</style>
Playing around with background sizes and positions in gradients here.
Highlighted solution (778 characters)
1 
<div></div><style>body{display:grid;place-items:center;background:#191919}div{width:290;height:120;--x:radial-gradient(ellipse,#FE5F55 25px,#0000 0) no-repeat;background:var(--x)185px 60px/100px 80px,radial-gradient(ellipse,#A64942 25px,#0000 0)no-repeat 115px 60px/100px 80px,var(--x)45px 60px/100px 80px,var(--x)-25px 60px/100px 80px,linear-gradient(to right,#0000 40px,#FE5F55 0 120px,#0000 0 180px,#A64942 0 220px,#0000 0 250px,#FE5F55 0 290px,#0000 0)100%-110px no-repeat,linear-gradient(to right,#0000 40px,#FE5F55 0 50px,#0000 0 110px,#FE5F55 0 120px,#0000 0 180px,#A64942 0 190px,#0000 0 250px,#FE5F55 0 260px,#0000 0)100%-20px no-repeat,linear-gradient(#0000 10px,#191919 0 20px,#0000 0),linear-gradient(to right,#0000 260px,#FE5F55 0 290px,#0000 0)100% -90px no-repeat
...and a bit of code-golf to get less characters.
< Back to Frontend Friday Folks Index