< Back to Frontend Friday Folks Index

Danger Noodle

Highlighted solution (1308 characters)
1 
<div>
2 
<style>
3 
  body {
4 
    --g: #191919 0 15px, #E08027 0 20px, #191919 0 30px, #E08027 0 35px, #0000 0;
5 
    --r: radial-gradient(circle at 100% 100%,var(--g));
6 
    --b: radial-gradient(circle at 50% 0,var(--g));
7 
    --t: radial-gradient(circle at 50% 100%,var(--g));
8 
    --h: linear-gradient(to right, #E08027 0 5px, #0000 0 15px, #E08027 0 20px, #0000 0);
9 
    --v: linear-gradient(#E08027 0 5px, #0000 0 15px, #E08027 0 20px, #0000 0);
10 
    --l: / 20px 55px no-repeat;
11 
    --ll: 72px / 20px 155px no-repeat;
12 
    --e: / 70px 35px no-repeat;
13 
    background:
14 
      var(--v) 245px 140px / 30px 55px no-repeat,
15 
      var(--h) 15px 72px var(--l),
16 
      var(--h) 65px var(--ll),
17 
      var(--h) 115px var(--ll),
18 
      var(--h) 165px var(--ll),
19 
      var(--h) 215px 172px var(--l),
20 
      var(--r) 180px 140px var(--e),
21 
      var(--t) 15px 40px var(--e),
22 
      var(--t) 115px 40px var(--e),
23 
      var(--b) 65px 225px var(--e),
24 
      var(--b) 165px 225px var(--e),
25 
      var(--b) -35px 125px var(--e),
26 
      #191919;
27 
  }
28 
  div {
29 
    position:fixed;
30 
    top:135;
31 
    left:265;
32 
    width:50;
33 
    height:30;
34 
    background:
35 
      radial-gradient(circle at 35px 7px, #191919 5px, #0000 0),
36 
      radial-gradient(circle at 35px 23px, #191919 5px, #0000 0),
37 
      #E08027;
38 
    border-radius:25px 55px 55px 25px;
39 
  }
40 
</style>
This was quite hard to do. I've used gradients only and one div for the head. Since most parts of the gradients are the same, I've used variables extensively. I learned that you cannot use a variable to start off a function and another one to close it. You can put the arguments into a variable, if you need them though.
< Back to Frontend Friday Folks Index