CSS Battle #73 – Happy Tiger

[Narigo]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[Narigo]

Code Source – 600.01 {1087}

<div e></div>
<div h></div>
<div m></div>
<div n></div>
<style>
  body {
    background: #F3AC3C;
    display:grid;
    place-items:center;
  }
  div {
    position:absolute;
  }
  [e] {
    top:65px;
    background:
      radial-gradient(circle at 30px 50%,#1A4341 20px,#998235 0 30px,#0000 0) 0 0 / 110px;
    width:170px;
    height:60px;
  }
  [h] {
    background:
      radial-gradient(circle at 35px 70px, #1A4341 10px, #0000 0),
      radial-gradient(circle at 115px 70px, #1A4341 10px, #0000 0),
      conic-gradient(from -45deg at 50% 25px, #1A4341 90deg, #998235 0);
    border-radius: 75px 75px 60px 60px;
    width: 150px;
    height: 150px;
  }
  [m] {
    top:170;
    width: 100px;
    height: 40px;
    border-radius:25px 25px 60px 60px;
    background:
      radial-gradient(circle at 50% 0, #fff 10px, #1A4341 0 20px, #0000 0) -5px 10px / 80% 50% no-repeat,
      radial-gradient(circle at 50% 0, #fff 10px, #1A4341 0 20px, #0000 0) 25px 10px / 80% 50% no-repeat,
      #fff;
  }
  [n] {
    width:10;
    height:20;
    background:#1A4341;
    top:160px;
  }
</style>

[david-001]

Code Source – 600 {1493}

<div c></div><div a></div><div b></div><div d></div><div e></div><div f></div>
<style>
  body{
    background:#F3AC3C;
    position:relative;
  } 
  [a]{
    position:absolute;
    top:67;
    left:calc(50% - 75px);
    background:conic-gradient(from -45deg at 50% 25px, #1A4341 90deg, #998235 0);
    width: 150px;
    height: 150px;
    border-radius: 75px 75px 60px 60px;
  }
  [b]{
    position:absolute;
    top:127;
    left:calc(50% - 75px);
    background:radial-gradient(circle at 35px 10px, #1A4341 10px, #0000 0),radial-gradient(circle at 115px 10px, #1A4341 10px, #0000 0);
    width: 150px;
    height: 20px;
  }
  [c]{
    position:absolute;
    top:57;
    left:calc(50% - 85px);
    width: 170px;
    height: 60px;
    background:radial-gradient(circle at 30px 30px, #1A4341 20px, #998235 0 30px, #0000 0),radial-gradient(circle at 140px 30px, #1A4341 20px, #998235 0 30px, #0000 0);
  }
  [d]{
    position:absolute;
    top:162;
    left:calc(50% - 50px);
    width: 100px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 25px 25px 60px 60px
  }
  [e]{
    position:absolute;
    top:172;
    left:calc(50% - 35px);
    width: 70px;
    height: 20px;
    background: radial-gradient(circle at 20px 0, #FFFFFF 10px, #1A4341 0 20px, #0000 0),radial-gradient(circle at 50px 0, #FFFFFF 10px, #1A4341 0 20px, #0000 0);
  }
  [f]{
    position:absolute;
    top:152;
    left:calc(50% - 5px);
    width: 10px;
    height: 30px;
    background: #1A4341;
  }
</style>