Circles V2

circles-v2.markdown

Circles V2

A Pen by Jose Guerra on CodePen.

License.

index.pug

.a
  .a__1
    .a__2
      .a__3
        .a__4
          .a__5
            .a__6
              .a__7
                .a__8
                  .a__9
                    .a__10
                      .a__11
                        .a__12
                          .a__13
                            .a__14
                              .a__15
                                .a__16
                                  .a__17
                                    .a__18
                                      .a__19
                                        .a__20

style.scss

@mixin m($w) {
  width: $w;
  height: $w;
  margin-top: -$w / 2;
  margin-left: -$w / 2;
}
@mixin p($w) {
  top: $w;
  left: $w;
  width: $w;
  height: $w;
  margin-top: -$w;
  margin-left: -$w;
  transform-origin: center;
}
.a {
  @include m(400px);
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid #ff1744;
  border-radius: 50%;
  animation: r 10s linear infinite;
  @for $i from 1 through 20 {
    .a__#{$i} {
      @extend .a;
      @include p(400px - ($i * 15));
    }
  }
}

@keyframes r {
  to {
    transform: rotate(360deg);
  }
}
body {
  overflow: hidden;
  background: #231231;
}