CSS Battle #93 – Great Wall

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

[meg-gutshall]

First try – 600.07 {907}

<div class="frame">
  <div class="moon"></div>
  <div class="wall left"></div>
  <div class="wall middle"></div>
  <div class="wall right"></div>
</div>
<style>
  body {
    background: #4F77FF;
    display: grid;
    place-items: center;
  }
  div {
    position: relative;
  }
  .frame {
    width: 200;
    height: 200;
    background: #191919;
    clip-path: circle(50%);
  }
  .moon {
    width: 40;
    height: 40;
    border-radius: 50%;
    background: #F9E492;
    top: 40;
    left: 40;
  }
  .wall {
    width: 100;
    height: 68;
    background: repeating-linear-gradient(#F9E492, #F9E492 16px, #191919 16px, #191919 26px);;
  }
  .left {
    top: 82;
  }
  .middle {
    width: 20;
    top: 8;
    left: 100;
    background: repeating-linear-gradient(#D6B73F, #D6B73F 16px, #191919 16px, #191919 26px);;
    transform: skew(0, -33deg);
  }
  .right {
    top: -67;
    left: 120;
  }
</style>

[Narigo]

Code Source – 601.22 {608}

<style>
  &{
    background:
      radial-gradient(1q,#0000 100px,#4F77FF 0),
      radial-gradient(1q,#F9E492 20px,#0000 0) -40px -40px,
      linear-gradient(146deg,#191919 10px,#D6B73F 0 23px,#191919 0 32px,#D6B73F 0 45px,#191919 0 53px,#D6B73F 0 67px,#0000 0) 200px 160px / 20px 100px no-repeat,
      linear-gradient(#F9E492 16px,#191919 0 26px,#F9E492 0 42px,#191919 0 52px,#F9E492 0 68px,#191919 0) 220px 159px / 200px 78px no-repeat,
      linear-gradient(#F9E492 16px,#191919 0 26px,#F9E492 0 42px,#191919 0 52px,#F9E492 0 68px,#191919 0) 0 172px / 200px 78px no-repeat,
      #191919;
  }
</style>

[Narigo]

Some animation fun with custom properties

<style>
  @property --x {
    syntax: "<angle>";
    inherits: false;
    initial-value: 90deg;
  }
  @property --c {
    syntax: "<color>";
    inherits: false;
    initial-value: #4F77FF;
  }
  @property --sun {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(226.36deg 100% 65.49%);
  }
  &{
    animation: moon 4s infinite forwards linear;
    background:
      radial-gradient(1q,#0000 100px,var(--c) 0),
      linear-gradient(146deg,#0000 10px,#D6B73F 0 23px,#191919 0 32px,#D6B73F 0 45px,#191919 0 53px,#D6B73F 0 67px,#191919 0) 200px 160px / 20px 100px no-repeat,
      linear-gradient(#F9E492 16px,#191919 0 26px,#F9E492 0 42px,#191919 0 52px,#F9E492 0 68px,#191919 0) 220px 159px / 200px 100px no-repeat,
      linear-gradient(#F9E492 16px,#191919 0 26px,#F9E492 0 42px,#191919 0 52px,#F9E492 0 68px,#191919 0) 0 172px / 200px 78px no-repeat,
      radial-gradient(1q,#F9E492 20px,#0000 0) calc(sin(var(--x)) * 30px * 2) calc(cos(var(--x)) * -70px),
      var(--sun);
  }
  @keyframes moon {
    0% {
      --c: hsl(226.36deg 100% 10%);
      --x: -120deg;
      --sun: hsl(226.36deg 100% 0%);
    }
    10%{
      --sun: hsl(26.36deg 100% 35.49%);
    }
    25%{
      --c: hsl(226.36deg 100% 65.49%);
      --sun: hsl(226.36deg 100% 65.49%);
    }
    40%{
      --sun: hsl(256.36deg 100% 35.49%);
    }
    50%,100% {
      --c: hsl(226.36deg 100% 10%);
      --x: 140deg;
      --sun: hsl(226.36deg 100% 0%);
    }
  }
</style>