<canvas id='c'></canvas>
<p><span>set the distance between triangles: </span>
  <input type="range" id="dbt" min="1" max="10" value="1">
</p>
body {
  margin: 0;
  overflow: hidden;
  background: black;
  color: Cornsilk;
  font-family: serif;
  font-style: italic;
  line-height: 200%;
}

h1 {
  font-size: 23px;
  text-align: center;
  font-weight: normal;
  margin: 1em 0;
}

canvas,
p {
  width: 500px;
  display: block;
  margin: .5em auto;
}

canvas {
  margin-top: calc(50vh - 300px);
}

p input {
  width: 100%;
}

span.label {
  width: 10%;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  background-color: #777;
  width: 20px;
  height: 20px;
  border: 3px solid #333;
  border-radius: 50%;
  margin-top: -9px;
}

input[type=range]::-moz-range-thumb {
  background-color: #777;
  width: 15px;
  height: 15px;
  border: 3px solid #333;
  border-radius: 50%;
}

input[type=range]::-ms-thumb {
  background-color: #777;
  width: 20px;
  height: 20px;
  border: 3px solid #333;
  border-radius: 50%;
}

input[type=range]::-webkit-slider-runnable-track {
  background-color: #777;
  height: 3px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  outline: none;
}

input[type=range]::-moz-range-track {
  background-color: #777;
  height: 3px;
}

input[type=range]::-ms-track {
  background-color: #777;
  height: 3px;
}

input[type=range]::-ms-fill-lower {
  background-color: HotPink
}

input[type=range]::-ms-fill-upper {
  background-color: black;
}
var dbt = document.getElementById("dbt");
dbt.value = Math.floor((Math.random() * 10) + 1);

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 500;
var ch = c.height = 500;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;
var frames = 0;
var requestId;
var Ry = [];
var I = 60; //size
var a = 3 * I; //3 for a deltoid
var b = 1 * I;
var h = 0;
var polygon = 3; //3 for triangles
var distanceBetweenTriangles = parseInt(dbt.value);
ctx.fillStyle = "rgba(0,0,0,.05)";

function Draw() {
  frames += .1;
  h = 30 * Math.sin(frames * rad);
  ctx.fillRect(0, 0, cw, ch)

  Ry = buildRy(a, b, h);
  console.log(distanceBetweenTriangles)
  for (var i = 0; i < Ry.length; i += distanceBetweenTriangles) {
    strokePol(Ry[i], 30, polygon)
  }
  requestId = window.requestAnimationFrame(Draw);
}

function Init() {
  var dbt = document.getElementById("dbt");
  if (requestId) {
    window.cancelAnimationFrame(requestId);
    requestId = null;
    var frames = 0;
  }
  ctx.fillStyle = "rgba(0,0,0,.05)";
  requestId = window.requestAnimationFrame(Draw);
}

window.addEventListener("load", Init, false);
dbt.addEventListener("input", function() {
  distanceBetweenTriangles = parseInt(this.value);
  Init();
}, false);

function strokePol(o, sqr, n) {
  var a = rad * (360 / n)
  ctx.beginPath();
  ctx.strokeStyle = o.strokeStyle;
  for (var i = 0; i < n; i++) {
    var x = o.x + sqr * Math.cos(a * i + frames / 2);
    var y = o.y + sqr * Math.sin(a * i + frames / 2);
    ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.stroke();
}

function buildRy(a, b, h) {
  Ry.length = 0;
  for (var T = 0; T < 360; T++) {
    var o = {}
    o.t = T * rad;
    o.x = cx + (a - b) * Math.cos(o.t) + h * Math.cos((a - b) / b * o.t);
    o.y = cy + (a - b) * Math.sin(o.t) - h * Math.sin((a - b) / b * o.t);
    o.strokeStyle = "hsl(" + (T + 120) + ",100%, 50%)";
    Ry.push(o);
  }
  return Ry
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.