CSS Battle #133 – Spiral

[meg-gutshall]

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 {characters}</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 {characters}

your cssbattles code here!

[Narigo]

Code Source – 606.51 {432}

<style>
  &{
    background:
      radial-gradient(1q at 170px 50%, #D86F45 10px,#3210 0),
      radial-gradient(1q at 90px 50%, #D86F45 10px,#3210 0),
      radial-gradient(1q at 180px 0,#F5D6B4 40px,#D86F45 0 60px,#F5D6B4 0 80px,#D86F45 0 100px,#F5D6B4 0) 0 100% / 100% 50% no-repeat,
      radial-gradient(1q at 50% 100%,#F5D6B4 20px,#D86F45 0 40px,#F5D6B4 0 60px,#D86F45 0 80px,#F5D6B4 0) 0 0 / 100% 50% no-repeat;
  }
</style>

[meg-gutshall]

First attempt using clip-path – 602.51 {532}

<div></div>
<style>
  body {
    background: #F5D6B4;
    margin: 70 80;
  }
  div {
    width: 200;
    height: 180;
    background: #D86F45;
    clip-path: shape(
      from 20px 80px,
      arc by -20px 0 of 10px,
      arc by 200px 0 of 100px,
      arc by -160px 0 of 80px,
      arc by 120px 0 of 60px,
      arc by -80px 0 of 40px,
      arc by 20px 0 of 10px,
      arc by 40px 0 of 20px cw,
      arc by -80px 0 of 40px cw,
      arc by 120px 0 of 60px cw,
      arc by -160px 0 of 80px cw,
      close
    );
  }
</style>

Refactored solution using clip-path – 605.04 {459}

<style>
  html {
    background: #F5D6B4;
    margin: 62 72;
  }
  body {
    height: 180;
    background: #D86F45;
    clip-path: shape(
      from 5vw 5pc,
      arc by -5vw 0 of 1q,
      arc by 50vw 0 of 1q,
      arc by -40vw 0 of 1q,
      arc by 30vw 0 of 1q,
      arc by -5pc 0 of 1q,
      arc by 5vw 0 of 1q,
      arc by 5ch 0 of 1q cw,
      arc by -5pc 0 of 1q cw,
      arc by 30vw 0 of 1q cw,
      arc by -40vw 0 of 1q cw
    );
  }
</style>

Minified solution using clip-path – 619.13 {319}

<style>html{background:#f5d6b4;margin:62 72}body{height:180;background:#d86f45;clip-path:shape(from 5vw 5pc,arc by -5vw 0 of 1q,arc by 50vw 0 of 1q,arc by -40vw 0 of 1q,arc by 30vw 0 of 1q,arc by -5pc 0 of 1q,arc by 5vw 0 of 1q,arc by 5ch 0 of 1q cw,arc by -5pc 0 of 1q cw,arc by 30vw 0 of 1q cw,arc by -40vw 0 of 1q cw

[meg-gutshall]

@Narigo & @Arvind644 – I went div-less in my refactored solution

[Arvind644]

Code Source – 600.23 {781}

<div i></div>
<div f></div>
<div s></div>
<div o></div>
<p></p>
<style>
  body {
    display: grid;
    background: #F5D6B4;
    place-items: center;
  }
  p {
    position: absolute;
    width: 20;
    height: 20;
    background: #D86F45;
    border-radius: 50%;
    translate: -110px;
    box-shadow: 80px 0 #D86F45;
  }
  div {
    position: absolute;
    border: 20px solid #D86F45;
    border-top: none;
    border-radius: 0px 0px 100px 100px;
  }
  [i] {
    width: 40;
    height: 22;
    rotate: 180deg;
    translate: 0px -19px;
  }
   [f] {
    width: 80;
    height: 40;
    translate: -20px 30px;
  }
  [s] {
    width: 120;
    height: 60;
    rotate: 180deg;
    translate: 0 -40px;
  }
  [o] {
     width: 160;
    height: 80;
    translate: -20px 50px;
  }
</style>