CSS Battle #154 – Poker Chip

[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 {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!

[meg-gutshall]

First attempt – got 99.9% – 597.35 {424}

<div></div>
<style>
  body {
    display: flex;
    place-items: center;
    place-content: center;
    background: #998235
  }
  div {
    width: 210px;
    height: 210px;
    background: radial-gradient(#0B2429 0 60px, #FCBE5C 60px 70px, #0B2429 70px 80px, transparent 80px 95px, #0B2429 95px),
    repeating-conic-gradient(
      #0B2429 -10deg 10deg,
      #FCBE5C 10deg 35deg
    );
    border-radius: 50%;
  }
</style>

Second attempt – still 99.9% – 597.03 {583}

<div class="outer"></div>
<div class="inner"></div>
<style>
  * {
    background: var(--b, #998235);
  }
  body {
    display: flex;
    place-items: center;
    place-content: center;
  }
  div {
    border-radius: 50%;
    --b: #0B2429;
  }
  .inner {
    width: 120px;
    height: 120px;
    border: 10px solid #FCBE5C;
    position: fixed;
    outline: 10px solid #0B2429;
  }
  .outer {
    width: 190px;
    height: 190px;
    --b: repeating-conic-gradient(
      from -10deg,
      #0B2429 0 20deg,
      #FCBE5C 20deg 45deg
    );
    border: 10px solid #0B2429;
  }
</style>

Finally got to 100% with some help from @Narigo! – 600.52 {698}

<p o></p>
<p i></p>
<style>
  body {
    display: grid;
    place-items: center;
    background: #998235;
  }
  p {
    border-radius: 50%;
    background: #0B2429;
  }
  [i] {
    width: 120px;
    height: 120px;
    position: fixed;
    border: 10px solid #FCBE5C;
    outline: 10px solid #0B2429;
  }
  [o] {
    width: 190px;
    height: 190px;
    --l: #FFF0 80px,
      #0B2429 80px 110px,
      #FFF0 110px;
    --c: #FFF0 119px,
      #0B2429 119px 149px,
      #FFF0 149px;
    background: linear-gradient(var(--l)),
    linear-gradient(45deg, var(--c)),
    linear-gradient(-45deg, var(--c)),
    linear-gradient(90deg, var(--l)),
    #FCBE5C;
    border: 10px solid #0B2429;
  }
</style>

Minified – 603.82 {488}

<p o><p i><style>body{display:grid;place-items:center;background:#998235}p{border-radius:50%;background:#0b2429}[i]{width:120;height:120;position:fixed;border:10px solid#fcbe5c;outline:10px solid#0b2429}[o]{width:190;height:190;--l:#FFF0 80px,#0B2429 80px 110px,#FFF0 110px;--c:#FFF0 119px,#0B2429 119px 149px,#FFF0 149px;background:linear-gradient(var(--l)),linear-gradient(45deg,var(--c)),linear-gradient(-45deg,var(--c)),linear-gradient(90deg,var(--l)),#fcbe5c;border:10px solid#0b2429

[Narigo]

Code Source – 601.67 {575}

<div></div>
<style>body{display:grid;place-items:center;background:#998235}
  div {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background:
      radial-gradient(#0B2429 60px, #FCBE5C 0 70px, #0000 0),
      linear-gradient(#0000 0 90px, #0B2429 0 120px, #0000 0),
      linear-gradient(90deg, #0000 0 90px, #0B2429 0 120px, #0000 0),
      linear-gradient(45deg, #0000 0 133px, #0B2429 0 163px, #0000 0),
      linear-gradient(-45deg, #0000 0 133px, #0B2429 0 163px, #0000 0),
      radial-gradient(#0B2429 80px, #FCBE5C 0 95px, #0B2429 0);
  }
</style>