Holly motion

holly-motion.markdown

Holly motion

Out of nothing, everything

© Monica Grigorova

A Pen by Monica on CodePen.

License.

index.haml

-3.times do
  .holy
    -4.times do
      .motors
        -60.times do
          .nothing

script.js

//pure css

style.scss

html,
body {
  width: 100%;
  height: 100%;
}
body {
  background-color: #140032;
  overflow: hidden;
  margin: 0;
  *,
  *:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
  }
}
.holy {
  &:first-child {
    transform: scale(-1, 1);
  }
}
.motors {
  @for $i from 1 through 30 {
    &:nth-child(#{$i}) {
      transform: scale(-$i * 1 / 5, 1);
    }
  }
}
.nothing {
  width: 30px;
  height: 30px;
  @for $i from 1 through 40 {
    &:nth-child(#{$i}) {
      transform: rotate($i * 180deg / 30) translate(200px);
      &:after {
        animation-delay: -$i * 2.5s / 30;
        border-color: hsla($i * 360 / 30, 100%, 50%, 1);
      }
    }
  }
  &:after {
    content: "";
    width: inherit;
    height: inherit;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
    animation: everything 2.5s ease-in-out infinite;
  }
}
@keyframes everything {
  50% {
    transform: scale(-4, -4) rotate(-180deg) skew(70deg);
  }
}