Линейный фрактал

Анимация линейного фрактала на канвасе

HTML

  <div class="canvas">
      <canvas id="myCanvas" width="640" height="640"></canvas>
  </div>

CSS

*{
    margin: 0;
 }
body{
    background-image: linear-gradient(to top left, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

JS

Дополнительно потребуется фреймворк createjs

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

скрипт

window.addEventListener('load', init);
var curves, w, h, centerX, centerY;
var curveList = [];
var curveListB = [];
var stage;
var size = window.innerHeight/4.75 ;

function init() {
  stage = new createjs.Stage('myCanvas');

  for(var i = 8; i < 15; i++){
    var curves = new Rings();
    curves.x = window.innerWidth/2;
    curves.y = window.innerHeight/2;
    if(i < 8){
      //curves.scaleX = curves.scaleY = 1/Math.pow(2,i);
    }else if(i == 8){
      curves.scaleX = curves.scaleY = 1;
    }else if(i > 8){
      curves.scaleX = curves.scaleY = 1*Math.pow(2,i-8);
    }
    curveList[i] = curves;
    stage.addChild(curves)
  }

  createjs.Ticker.addEventListener("tick", stage);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  window.addEventListener("resize", function(){
    handleResize(curves);
  }, false);
  handleResize();
  stage.update();

}


//mainRing----------

class Rings extends createjs.Container {
  constructor(scale) {
    super();
    for (var i = 0; i < 6; i++) {
      var cellRings = new DobuleCells();
      cellRings.regY = window.innerHeight/2;
      cellRings.rotation = 30*i;
      this.addChild(cellRings);
    }
    for (var i = 0; i < 6; i++) {
      var cellRings = new DobuleCells();
      cellRings.regY = window.innerHeight/2;
      cellRings.rotation = 30*i+15;
      cellRings.scaleX = 0.7055;
      cellRings.scaleY = 0.7055;
      this.addChild(cellRings);
    }
  }
}

class DobuleCells extends createjs.Container {
  constructor() {
    super();
    for(var i = 0; i< 2; i++){
      var doubleCells = new Cells();
      doubleCells.rotation = 45;
      doubleCells.y = window.innerHeight*i-size*i;
      this.addChild(doubleCells);
    }
  }
}

class Cells extends createjs.Container {
  constructor() {
    super();
    var lineNum = 100;
    var linesA = new Lines(size, lineNum);
    this.addChild(linesA);
    var linesB = new Lines(size, lineNum);
    linesB.regX = size/Math.SQRT2;
    linesB.regY = size/Math.SQRT2;
    linesB.rotation = 180;
    this.addChild(linesB);
  }
}

class Lines extends createjs.Shape {
  constructor(size, lineNum) {
    super();
    this.graphics
      .beginStroke("#FFF")
      .setStrokeStyle(0.3);
    for(var i = 0; i < lineNum+1; i++){
      this.graphics.moveTo(0, size/Math.SQRT2/lineNum*i);
      var cmd = this.graphics.lineTo(0, size/Math.SQRT2/lineNum*i).command;
      createjs.Tween.get(cmd, {loop: false})
        .wait(1000)
        .to({x:(size*2/Math.SQRT2)/lineNum*i, y:(size*2)/Math.SQRT2},
       300*i,
       createjs.Ease.bounceOut)
      this.on('tick',this.update, this);
    }
  }
  update() {

  }
}

function handleResize(curves) {
  w = window.innerWidth;
  h = window.innerHeight;
  // Canvas
  stage.canvas.width = w;
  stage.canvas.height = h;
  for (var i = 1; i < curveList.length; i++) {
    curveList[i].x = w/2;
    curveList[i].y = h/2;
  }
  stage.update();
}