CSS Battle #98 – Candle

[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 – 600.39 {728}

<div class="flame"></div>
<div class="candle">
  <div class="candle-top">
    <div class="melt"></div>
  </div>
</div>
<style>
  * {
    background: var(--b, #14313E);
  }
  body {
    display: grid;
    place-content: center;
  }
  .flame {
    width: 30px;
    height: 50px;
    --b: #F3AC3C;
    border-radius: 50px 0 / 52px 0;
    margin-left: 40px;
    z-index: 1;
  }
  .candle {
    width: 80px;
    height: 130px;
    --b: #BA3E46;
    border-radius: 100% / 30px;
  }
  .candle-top {
    width: 80px;
    height: 30px;
    border-radius: 50%;
    --b: #F3695A;
  }
  .melt {
    width: 60px;
    height: 30px;
    border-radius: 50%;
    --b: #14313E;
    position: relative;
    left: 10px;
    top: -10px;
  }
</style>

Refactored – 601.68 {574}

<p c>
<p t>
<p m>
<p f>
<style>
  * {
    background: var(--b, #14313E);
    border-radius: var(--r, 50%);
    position: relative;
  }
  body {
    display: flex;
    flex-flow: column-reverse nowrap;
    place-items: center;
  }
  p {
    width: 80;
    height: 30;
    margin: 0;
  }
  [f] {
    width: 30;
    height: 50;
    --b: #F3AC3C;
    --r: 50px 0 / 52px 0;
    left: 15;
    top: 8;
  }
  [c] {
    height: 130;
    --b: #BA3E46;
    --r: 100% / 30px;
    top: -52;
  }
  [t] {
    --b: #F3695A;
    top: -22;
  }
  [m] {
    width: 60;
    top: -2;
  }
</style>

Minified – 612.94 {360}

<p c><p t><p m><p f><style>*{background:var(--b,#14313E);border-radius:var(--r,50%);position:relative}body{display:flex;flex-flow:column-reverse nowrap;place-items:center}p{width:80;height:30;margin:0}[f]{width:30;height:50;--b:#F3AC3C;--r:50px 0/52px 0;left:15;top:8}[c]{height:130;--b:#BA3E46;--r:100%/30px;top:-52}[t]{--b:#F3695A;top:-22}[m]{width:60;top:-2

Using gradients – 604.89 {462}

<p>
<style> 
body {
  background: 
  radial-gradient(ellipse 80px 40px at 50% 115px, #14313E 30px, #0000 0),
  radial-gradient(ellipse 80px 30px at 50% 125px, #F3695A 40px, #0000 0),
  radial-gradient(ellipse 80px 30px at 50% 225px, #BA3E46 40px, #0000 0),
  linear-gradient(#BA3E46,#BA3E46) 50% 125px / 80px 100px no-repeat,
  #14313E;
}
p {
  width: 30;
  height: 50;
  background: #F3AC3C;
  position: fixed;
  top: 45;
  left: 200;
  border-radius: 60px 0;
}

[Narigo]

Code Source – 602.33 {540}

<div f></div>
<style>
  [f] {
    width: 30px;
    height: 50px;
    background: #F3AC3C;
    border-radius: 60px 0;
    position:fixed;
    top:60;
    left:200;
  }
  body{
    background:
      radial-gradient(ellipse 60px 30px,#14313E 30px,#0000 0) 50% -35px no-repeat,
      radial-gradient(ellipse 80px 30px,#F3695A 40px,#0000 0) 50% -25px no-repeat,
      radial-gradient(ellipse 80px 30px,#BA3E46 40px,#0000 0) 50% 75px no-repeat,
      linear-gradient(#BA3E46,#BA3E46) 50% 127px / 80px 100px no-repeat,
      #14313E;
  }
</style>