< Back to Frontend Friday Folks Index

Froggy

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 (746 characters)
1 
<div><l></l><n></n></div>
2 
<style>
3 
  body {
4 
    background: #293462;
5 
    display: grid;
6 
    place-items:center
7 
  }
8 
  div {
9 
    margin-left: -75px;
10 
    margin-top: 20px;
11 
    width: 75px;
12 
    height: 100px;
13 
    border-radius: 50px 0 0 50px;
14 
    background: radial-gradient(circle at 100% -125px, #FE5F55 0 195px, #A64942 0);
15 
    position:relative;
16 
    -webkit-box-reflect: right;
17 
  }
18 
  l {
19 
    width: 30px;
20 
    height: 30px;
21 
    background:radial-gradient(#293462 5px, #FFF1C1 0);
22 
    position:absolute;
23 
    top: -25px;
24 
    left: 15px;
25 
    border: 10px solid #FE5F55;
26 
    border-radius: 50%;
27 
  }
28 
  n {
29 
    width:10px;
30 
    height:10px;
31 
    background:#293462;
32 
    position:absolute;
33 
    border-radius: 50%;
34 
    top: 50px;
35 
    left: 60px;
36 
  }
37 
</style>
I'm not sure whether webkit-box-reflect helps too much here. What I don't like is having the mouth part. I'd like to know how this can be calculated instead of having to try and test lots of values until something works for 100%.
Highlighted solution (662 characters)
1 
<div><l></l></div>
2 
<style>
3 
  body {
4 
    background: #293462;
5 
    display: grid;
6 
    place-items:center
7 
  }
8 
  div {
9 
    margin-left: -75px;
10 
    margin-top: 20px;
11 
    width: 75px;
12 
    height: 100px;
13 
    border-radius: 50px 0 0 50px;
14 
    background: radial-gradient(circle at 65px 55px, #293462 0 5px, #0000 0),
15 
      radial-gradient(circle at 100% -125px, #FE5F55 0 195px, #A64942 0);
16 
    position:relative;
17 
    -webkit-box-reflect: right;
18 
  }
19 
  l {
20 
    width: 30px;
21 
    height: 30px;
22 
    background:radial-gradient(#293462 5px, #FFF1C1 0);
23 
    position:absolute;
24 
    top: -25px;
25 
    left: 15px;
26 
    border: 10px solid #FE5F55;
27 
    border-radius: 50%;
28 
  }
29 
</style>
Ok, using another radial gradient makes sense instead of adding another element.
< Back to Frontend Friday Folks Index