Conical Gradient Cogs

Conical Gradient Cogs.markdown

Conical Gradient Cogs

A Pen by Ryan Dunn on CodePen.

License.

index.html

<div class="cogbg"></div>
<div class="cog1"></div>
<div class="cog2"></div>
<div class="cog3"></div>

scripts

<script src="http://leaverou.github.io/conic-gradient/conic-gradient.js"></script>

style.css

body {
  background: radial-gradient(circle, #333, #111);
  overflow: hidden;
}

@keyframes rotate {
    from { transform: rotate(0) }
    to { transform: rotate(360deg) }
}

@mixin cog($size, $fg, $bg, $tooth1, $tooth2, $toothSize, $center1, $center2, $anim) {
  position: absolute;
  width: $size;
  height: $size;
  top: 50%;
  left: 50%;
  border-radius: $size;
  background-image:
    radial-gradient($fg $toothSize, transparent $toothSize),
    repeating-conic-gradient($fg 0 $tooth1, transparent 0 $tooth2);
  animation-name: rotate;
  animation-duration: $anim;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  &:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    border-radius: $size;
    background-image:
      radial-gradient($bg $center1, $fg $center1, $fg $center2, transparent $center2),
      repeating-conic-gradient($bg 0 45deg, transparent 0 90deg);
  }
}


.cog1 {
  @include cog(200px, #666, #2e2e2e, 15deg, 30deg, 60%, 20%, 30%, 6s);
  margin: -100px 0 0 -230px;
}

.cog2 {
  @include cog(100px, #666, #2e2e2e, 30deg, 60deg, 50%, 20%, 30%, 3s);
  margin: 20px 0 0 -58px;
  animation-direction: reverse;
}

.cog3 {
  @include cog(100px, #666, #2e2e2e, 30deg, 60deg, 50%, 20%, 30%, 3s);
  margin: -23px 0 0 20px;
}

.cogbg {
  @include cog(300px, #252525, #333, 10deg, 20deg, 65%, 20%, 30%, 9s);
    margin: -150px 0 0 -200px;
    animation-direction: reverse;
}