CSS Battle #55 – Windmill

[danieltott]

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!

[danieltott]

Here's my first pass!

Minified Code Source – 636.22 {252}

<p><p a><p b><p c><style>*{background:var(--b,#191919)}[a]{--r:90deg;--b:#F9E492}[b]{--r:180deg}[c]{--r:270deg;--b:#F9E492}p{position:fixed;top:34;left:200;width:50;height:100;--b:#4F77FF;border-radius:0 1in 1in 0;transform-origin:0 25vw;rotate:var(--r
</style>

Unminified Code Source – 619.87 {315}

<p>
<p a>
<p b>
<p c>
<style>
* {
  background: var(--b,#191919);
}
p {
  position:fixed;
  top:34;
  left: 200;
  width: 50;
  height: 100;
  --b: #4F77FF;
  border-radius:0 1in 1in 0;
  rotate: var(--r);
  transform-origin: 0 100px;
}
[a] {
  --r: 90deg;
  --b: #F9E492;
}
[b] {
  --r: 180deg;
}
[c] {
  --r: 270deg;
  --b: #F9E492;
}
</style>

[Narigo]

Code Source – 604.08 {481}

<div></div>
<div></div>
<div></div>
<div></div>
<style>
  * {
    background: var(--c,#191919);
  }
  div {
    --c: #F9E492;
    position: absolute;
    border-radius: 0 0 50px 50px;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 50px;
    rotate: calc(var(--r) * 90deg);
    transform-origin: 0 0;
  }
  div:nth-child(1) {
    --r: 1;
  }
  div:nth-child(2) {
    --r: 2;
  }
  div:nth-child(3) {
    --r: 3;
  }
  div:nth-child(odd) {
    --c: #4F77FF;
  }
</style>

animated version

<div></div>
<div></div>
<div></div>
<div></div>
<style>
  * {
    background: var(--c,#191919);
  }
  body {
    animation: wind 3s infinite linear;
  }
  div {
    --c: #F9E492;
    position: absolute;
    border-radius: 0 0 50px 50px;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 50px;
    rotate: calc(var(--r) * 90deg);
    transform-origin: 0 0;
  }
  div:nth-child(1) {
    --r: 1;
  }
  div:nth-child(2) {
    --r: 2;
  }
  div:nth-child(3) {
    --r: 3;
  }
  div:nth-child(odd) {
    --c: #4F77FF;
  }
  @keyframes wind {
    0% { rotate: calc(0deg) }
    100% { rotate: calc(360deg) }
  }
</style>

[meg-gutshall]

First try – 601.3 {601}

<div b top></div>
<div y l></div>
<div b bot></div>
<div y r></div>
<style>
  body {
    background: #191919;
    display: grid;
    place-items: center;
  }
  div {
    position: fixed;
    width: 50px;
    height: 100px;
    border-radius: 0 50px 50px 0;
  }
  [b] {
    background: #4F77FF;
  }
  [y] {
    background: #F9E492;
  }
  [top] {
    top: 50;
    margin-left: 50;
  }
  [bot] {
    bottom: 50;
    margin-right: 50;
    rotate: 180deg;
  }
  [l] {
    top: 75;
    margin-right: 100;
    rotate: 270deg;
  }
  [r] {
    bottom: 75;
    margin-left: 100;
    rotate: 90deg;
  }
</style>

Then I basically copied @danieltott – 609.01 {398}

<p>
<p y l>
<p b>
<p y r>
<style>
  * {
    background: var(--b, #191919);
  }
  p {
    position: fixed;
    top: 34;
    left: 200;
    width: 50;
    height: 100;
    --b: #4F77FF;
    border-radius: 0 1in 1in 0;
    rotate: var(--r);
    transform-origin: 0 100px;
  }
  [y] {
    --b: #F9E492;
  }
  [b] {
    --r: 180deg;
  }
  [l] {
    --r: 270deg;
  }
  [r] {
    --r: 90deg;
  }
</style>

...only I did it better 😉 – 636.92 {250}

<p><p y l><p b><p y r><style>*{background:var(--b,#191919)}p{position:fixed;top:34;left:200;width:50;height:100;--b:#4F77FF;border-radius:0 1in 1in 0;rotate:var(--r);transform-origin:0 100px}[y]{--b:#F9E492}[b]{--r:180deg}[l]{--r:270deg}[r]{--r:90deg