< Back to Frontend Friday Folks Index

Third Eye

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 (376 characters)
1 
<style>
2 
  &{background:
3 
    radial-gradient(1q at 50% -70px,#D9D9D9 100px,#E3516E 0) 0 149px / 400px 70px no-repeat,
4 
    radial-gradient(1q at 50% 140px,#D9D9D9 100px,#E3516E 0) 0 81px / 400px 70px no-repeat,
5 
    conic-gradient(#E3516E 90deg,#3210 0 180deg, #E3516E 0 270deg,#3210 0),
6 
    radial-gradient(1q at 80px 80px,#D9D9D9 75px,#E3516E 0) -80px -80px / 400px 300px
7 
    }

In the beginning, I thought this could be done by a repeating gradient solution, but I failed miserably.

Highlighted solution (334 characters)
1 
<div></div>
2 
<style>
3 
  &{
4 
    background:
5 
      radial-gradient(1q at 50% -75q,#3210 106q,#E3516E 0) 0 159q/100%70px no-repeat,
6 
      radial-gradient(1q at 50% 149q,#3210 106q,#E3516E 0) 0 85q/100%70px no-repeat,
7 
      #D9D9D9
8 
  }
9 
div {position:fixed;inset:0;
10 
  corner-shape: scoop;
11 
  border-radius:79.5q 0;
12 
  border:90q solid#E3516E
13 
}

I've tried using corner-shape: scoop here, but it always ended up in 99.9% only. Even though the diff looks better with corner-shape, I could not get it to 100%.

< Back to Frontend Friday Folks Index