CSS Battle #110 – Sunrays

[Narigo]

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 go using div and position – 600.51 {700}

<div a></div>
<div b></div>
<div c></div>
<div d></div>
<div e></div>
<div f></div>
<div g></div>
<style>
  body {
    background: #D25B70;
  }
  div {
    width: 100px;
    height: 10px;
    border-radius: 5px;
    background: #F2E09F;
    position: fixed;
  }
  [a] {
    bottom: 95px;
    left: 80px;
  }
  [b] {
    bottom: 130px;
    left: 89px;
    rotate: 30deg;
  }
  [c] {
    bottom: 156px;
    left: 115px;
    rotate: 60deg;
  }
  [d] {
    bottom: 165px;
    left: 150px;
    rotate: 90deg;
  }
  [e] {
    bottom: 156px;
    left: 185px;
    rotate: -60deg;
  }
  [f] {
    bottom: 130px;
    left: 211px;
    rotate: -30deg;
  }
  [g] {
    bottom: 95px;
    left: 220px;
  }
</style>

Refactor – 601.12 {617}

<p a><p b><p c><p d><p e><p f><p g>
<style>
  body {
    background: #D25B70;
  }
  p {
    width: 100px;
    height: 10px;
    border-radius: 5q;
    background: #F2E09F;
    position: fixed;
  }
  [a] {
    top: 179px;
    left: 80px;
  }
  [b] {
    top: 144px;
    left: 89px;
    rotate: 30deg;
  }
  [c] {
    top: 118px;
    left: 115px;
    rotate: 60deg;
  }
  [d] {
    top: 109px;
    left: 150px;
    rotate: 90deg;
  }
  [e] {
    top: 118px;
    right: 115px;
    rotate: -60deg;
  }
  [f] {
    top: 144px;
    right: 89px;
    rotate: -30deg;
  }
  [g] {
    top: 179px;
    right: 80px;
  }
</style>

Refactored & Minified – 613.96 {352}

<p a><p b><p c><p d><p e><p f><p g><style>body{background:#D25B70}p{width:100;height:10;border-radius:5q;background:#F2E09F;position:fixed}[a]{top:179;left:80;}[b]{top:144;left:89;rotate:30deg}[c]{top:118;left:115;rotate:60deg}[d]{top:109;left:150;rotate:90deg}[e]{top:118;left:185;rotate:-60deg}[f]{top:144;right:89;rotate:-30deg}[g]{top:179;right:80}

[Narigo]

Code Source – 627.21 {282}

Guessing position after rotating:

<div><div><div><div><div><div><div>
<style>
  body {
    background:#D25B70;
    margin:194px 79px;
    rotate: -30deg;
  }
  div {
    rotate: 30deg;
    transform-origin: 120px 5px;
    width: 100px;
    height: 10px;
    background: #F2E09F;
    border-radius: 9px;
  }
</style>

An easier version for positioning, but with more characters:

Code Source – 624.27 {294}

One trick to make it easier to get to the position by translating first and then rotating

<div><div><div><div><div><div><div>
<style>
  body {
    background:#D25B70;
    transform: translate(131px, 132px) rotate(-30deg);
  }
  div {
    rotate: 30deg;
    transform-origin: 120px 5px;
    width: 100px;
    height: 10px;
    background: #F2E09F;
    border-radius: 9px;
  }
</style>

And a little fun with animation in the end!

Code Source score {characters}

<div><div><div><div><div><div><div>
<p></p>
<style>
  @property --p {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }
  @keyframes siren {
    0% {
      --p: 0px;
    }
    100% {
      --p: 200px;
    }
  }
  body {
    background:#D25B70;
    transform: translate(131px, 132px) rotate(-30deg);
  }
  div {
    rotate: 30deg;
    transform-origin: 120px 5px;
    width: 100px;
    height: 10px;
    border-radius: 9px;
    animation: siren 500ms infinite;
    --a: blue;
    --b: red;
    background: radial-gradient(1q at 100% 50%,#0000 calc(var(--p) - 100px),var(--a) calc(var(--p) - 100px),var(--b) calc(var(--p) - 100px),var(--a) var(--p), #0000);
  }
  p {
    position: fixed;
    transform: translate(105px,-35px);
    background: orange;
    width: 30;
    height: 40;
    border-radius: 0 0 50px 50px;
  }
</style>

[david-001]

Code Source – 600 {1306}

<div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

<style>
  body{
    margin: 0;
    background: #D25B70;
  }
 .rectangle {
   position: absolute;
   top: 200px;
   left: 50%;
   width: 100px;    /* Rectangle width */
   height: 10px;   /* Rectangle height */
   background-color: #F2E09F;
   border-radius: 50px;
   transform-origin: center; /* Rotate around the center */
 }
  /* Define individual rotations for each rectangle */

  .rectangle:nth-child(1)  { transform: translate(-50%, -50%) rotate(180deg) translateX(70px); }
  .rectangle:nth-child(2)  { transform: translate(-50%, -50%) rotate(210deg) translateX(70px); }
  .rectangle:nth-child(3) { transform: translate(-50%, -50%) rotate(240deg) translateX(70px); }
  .rectangle:nth-child(4) { transform: translate(-50%, -50%) rotate(270deg) translateX(70px); }
  .rectangle:nth-child(5) { transform: translate(-50%, -50%) rotate(300deg) translateX(70px); }
  .rectangle:nth-child(6) { transform: translate(-50%, -50%) rotate(330deg) translateX(70px); }
  .rectangle:nth-child(7) { transform: translate(-50%, -50%) rotate(360deg) translateX(70px); }
</style>