100 hr Challenge (CSS)

100-hr-challenge-css.markdown

100 hr Challenge (CSS)

A Pen by jfirestorm44 on CodePen.

License.

index.pug

.wrapper
  - for (i = 0; i < 100; i++)
    hr
    

script.js

//rectangles or circles??? 

//uncomment border-radius and decide for yourself  

style.scss

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: black;
  perspective: 300px;
  overflow: hidden;
}
.wrapper {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: center;
  transform-style: preserve-3d;
  animation: rotate 60s linear infinite;

  hr {
    @for $i from 1 through 100 {
      $x: random(300) - 150px;
      $y: random(300) - 150px;
      $z: random(300) - 150px;
      $ry: random(90) - 0deg;

      &:nth-child(#{$i}) {
        position: absolute;
        left: 0;
        width: 150px;
        //border-radius: 50%;
        animation: hr#{$i}
          30s
          ease-in-out
          #{1s *
          ($i - 100)}
          infinite
          alternate;
      }
      @keyframes hr#{$i} {
        $glow: 0 0 5px hsla(random(255) + 100, random(100) + 60, 60, 1);
        $glow2: 0 0 5px hsla(random(255) + 100, random(100) + 60, 60, 1);
        0% {
          border: solid 2px hsla(random(255) + 100, random(100) + 60, 60, 1);
          box-shadow: $glow, $glow inset;
          @if $i <= 50 {
            transform: rotatey($ry) translate3d($x, $y, $z) rotate(0deg);
            height: 20px;
          } @else {
            transform: rotatey($ry) translate3d($x, $y, $z) rotate(0deg);
            width: random(50) + 0px;
            height: 50px;
          }
        }
        100% {
          border: solid 2px hsla(random(255) + 100, random(100) + 60, 60, 1);
          box-shadow: $glow2, $glow2 inset;
          @if $i <= 50 {
            transform: rotatey($ry)
              translate3d($x, $y, $z)
              rotate(random(270) - 270deg);
            width: random(75) + 0px;
          } @else {
            transform: rotatey($ry)
              translate3d($x, $y, $z)
              rotate(random(270) - 270deg);
            width: random(50) + 0px;
            height: random(50) + 25px;
          }
        }
      }
    }
  }
  @keyframes rotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
}