< Back to Frontend Friday Folks Index

Ryuk's Apple

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!

Highlighted solution (479 characters)
1 
<style>&{background:
2 
linear-gradient(#D4392D,#D4392D)50% 70px / 10px 20% no-repeat,
3 
#000;
4 
&::after,&::before {
5 
  content:'';
6 
  inset:0;
7 
  position:absolute;
8 
  --g: radial-gradient(110q 93q,#D4392D 63.5q, #0000 0);
9 
  --t: translate(29px)rotate(-57deg);
10 
  background:var(--g);
11 
  transform:var(--t);
12 
}
13 
&::before {
14 
  background:
15 
    radial-gradient(1q,#000 31px, #0000 0)48px 30px,
16 
    radial-gradient(1q,#000 31px, #0000 0)14px 52px,
17 
    var(--g);
18 
  transform:scaleX(-1)var(--t);
19 
}
20

This is a puzzle that is really hard to do with gradients, as we basically have rotated ellipses here.

< Back to Frontend Friday Folks Index