Only CSS: Spiral

index.pug

#ui
  .bg
  .rings
    - for (i = 0; i < 10; i++)
      .ring
        .border

only-css-spiral.markdown

Only CSS: Spiral

Like flower :)

A Pen by Yusuke Nakaya on CodePen.

License.

style.scss

body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

div {
  transform-style: preserve-3d;
  position: absolute;
  backface-visibility: hidden;
}

#ui {
  transform: rotateX(75deg);
  .bg {
    width: 60 * 8px;
    height: 60 * 8px;
    background: rgba(0, 0, 0, 1);
    background: linear-gradient(to bottom, #ff2626 0%,#4916ff 100%);
    // background: linear-gradient(to bottom, #200eba 0%,#7d9bed 100%);
    transform: translate(-50%, -50%) translateZ(-1px);
    border-radius: 100%;
  }
  .rings {
    .ring {
      transform: translate(-50%, -50%);
      border-radius: 100%;
      @for $i from 1 through 20 {
        &:nth-child(#{$i}) {
          width: $i * 60px;
          height: $i * 60px;
          animation: rotation random(3000) + 1000ms -4000ms linear infinite;
        }
      }
      .border {
        width: 100%;
        height: 100%;
        border: 30 - 3px solid rgba(0, 0, 0, 1);
        box-sizing: border-box;
        border-radius: 100%;
        transform-origin: 0 50%;
        transform: rotateY(-2deg);
      }
    }
  }
}

@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet" />