A Pen by Russell.

index.jade

#circle1.circle
#circle2.circle

Moiré-pattern-1.markdown

Moiré pattern 1

My first exploration into moiré patterns in css animations. Inspired by http://i.imgur.com/p0NQtgI.jpg

A Pen by Russell on CodePen.

License.

script.js

$(function(){
  var max = 50,
    circle1 = $('#circle1'),
    circle2 = $('#circle2'),
    html = '<div></div>';

  for(var i=1;i<= max; i++) {
    circle1.append(html);
    circle2.append(html);
  }
});

style.stylus

$height = 400px
$numCircles = 50
$line-width = 1px

.circle
  height: $height
  width: @height

.circle > div
  border-radius 50%
  border-width: $line-width
  border-color: #000
  border-style: solid
  height: $height;
  width: @height;

.circle
  float: left
  position: relative
  div
    position: absolute
    top: 50%
    left: 50%
    margin-top: -($height * 0.5)
    for num in (0..$numCircles)
      &:nth-child({num})
        height: ceil($height - (($height*(1/$numCircles))*num))
        width: @height
        margin-top: -(@height * 0.5)
        margin-left: @margin-top
 
@keyframes mergeCircle
  from {
    transform: translate3d(0,0,0)
  }

  to {
    transform: translate3d($height,0,0)
  }

#circle1
  animation-duration: 15s
  animation-name: mergeCircle
  animation-iteration-count: infinite
  animation-direction: alternate
  animation-timing-function: ease-out