CSS Battle #41 – Fox Head

[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]

Took me a while, but I finally got it with gradients now.

Gradients solution

<div></div>
<div class="r"></div>
<style>
  body {
    background: #293462;
    display: flex;
    place-items: center;
    justify-content: center;
    margin: 0;
  }
  .r {
    transform: scaleX(-1);
  }
  div {
    background: 
      radial-gradient(circle at 0px 40px, #FE5F55 40px, #293462 0) 10px 0 / 50px 40px no-repeat,
      radial-gradient(circle at 30px 75px, #293462 15px, transparent 15px),
      radial-gradient(circle at 0px 140px, #293462 40px, #FE5F55 0) 10px 0 / 50px 140px no-repeat,
      linear-gradient(transparent 40px, #FE5F55 0 100px, #293462 0),
      linear-gradient(to right,#FE5F55 0 10px, transparent 0)
    ;
    height: 140px;
    width: 50px;
  }
</style>

[danieltott]

Wooooo that was a tough one! Looks like @Narigo and I had similar thoughts, but I got to use -webkit-box-reflect again!:

Similar gradient solution

<style>
* {
  background: #293462;
}
* > * {
  margin: 80 150;
  -webkit-box-reflect: right;
  width: 50;
  height: 140;
  background: linear-gradient(#fe5f55 25vw, #293462 0) 0 0/5px 2in no-repeat,
    radial-gradient(circle at 30px 75px, #293462 5vh, #0000 0),
    radial-gradient(circle at 10px 35vw, #293462 5ch, #0000 0),
    radial-gradient(circle at 10px 5ch, #fe5f55 5ch, #0000 0),
    linear-gradient(#0000 5ch, #fe5f55 0);
}

Minified (370 characters)

<style>*{background:#293462}*>*{margin:80 150;-webkit-box-reflect:right;width:50;height:140;background:linear-gradient(#FE5F55 25vw,#293462 0) 0 0/5px 2in no-repeat,radial-gradient(circle at 30px 75px,#293462 5vh,#0000 0),radial-gradient(circle at 10px 35vw,#293462 5ch,#0000 0),radial-gradient(circle at 10px 5ch,#FE5F55 5ch,#0000 0),linear-gradient(#0000 5ch,#FE5F55 0

[danieltott]

Was able to get down a decent amount using rounded layered elements (and a little box-shadow) instead of stacking gradients:

Stacked rounded elements + box shadow:

<dd><p><dl>
<style>
dd {
  margin: 72 142;
  --b: #fe5f55;
  height: 140;
  width: 50;
  overflow: hidden;
  -webkit-box-reflect: right;
}
p {
  --b: #fe5f55;
  width: 200;
  height: 80;
  border-radius: 1in;
  margin: 0 0 0 -150;
  box-shadow: 0 25vw, 0-5vw 0 5px;
}
dl {
  border: 5vh solid;
  border-radius: 1in;
  margin: 60 15;
}
* {
  position: absolute;
  color: #293462;
  background: var(--b, #293462);
}

Minified (320 characters)

<dd><p><dl><style>dd{margin:72 142;--b:#FE5F55;height:140;width:50;overflow:hidden;-webkit-box-reflect:right}p{--b:#FE5F55;width:200;height:80;border-radius:1in;margin:0 0 0 -150;box-shadow:0 25vw,0-5vw 0 5px}dl{border:5vh solid;border-radius:1in;margin:60 15}*{position:absolute;color:#293462;background:var(--b,#293462