Spinning Ovals II

forked from walkerjeffd's block: Spinning Ovals II

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .stop-left {
      stop-color: rgba(0, 192, 191, 1);  /* Indigo */
    }

.stop-right {
      stop-color: rgba(44, 161, 252, 1);  /* Teal */
    }

.outlined {
      fill:   none;
      stroke: url(#mainGradient);
    }

ellipse { mix-blend-mode: normal; }

.isolate { isolation: isolate; }

</style>
</head>

<body>
  <script>
    var ellipseFactor = 1.1544  ,
        speed = 10000,
        omega = 180,
        scale = 1,
        strokeWidth = 36,
        blur = 0,
        n = 2,
        radiusRange = [100, 104],
        pulseFactor = 4;

// var opacity = 1 / n;
    var opacity = 0.42

var width = 960,
        height = 500;

var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('class', 'isolate')
      .attr('transform', 'scale(' + scale + ')')

var defs = svg.append('defs');

// Color gradient
    var mainGradient = defs.append('linearGradient')
      .attr('id', 'mainGradient');
    mainGradient.append('stop')
      .attr('class', 'stop-left')
      .attr('offset', '0');
    mainGradient.append('stop')
      .attr('class', 'stop-right')
      .attr('offset', '1');

// Filter for the outside glow
    var filter = defs.append('filter')
      .attr('id', 'glow');
    filter.append('feGaussianBlur')
      .attr('stdDeviation', blur)
      .attr('result','coloredBlur');

var feMerge = filter.append('feMerge');
    feMerge.append('feMergeNode')
      .attr('in', 'coloredBlur');

feMerge.append('feMergeNode')
      .attr('in', 'SourceGraphic');

// Shapes
    var data = d3.range(n);
    var ellipse = svg.selectAll('ellipse')
      .data(data);

ellipse = ellipse
      .enter()
      .append('ellipse')
      .classed('outlined', true)
      .style('filter', 'url(#glow)')
      .style('opacity', opacity)
      .style('stroke-width', strokeWidth)
      .attr('cx', width / 2)
      .attr('cy', height / 2)
      .attr('rx', 100 * ellipseFactor)
      .attr('ry', 100)

ellipse.each(function (d) {
      var theta = d / n * omega;
      d3.select(this)
        .attr('transform', 'rotate(' + theta + ',' + width/2 + ',' + height/2  + ')');
    });

d3.timer(function (elapsed) {
      ellipse.each(function (d) {
        var theta = elapsed % speed / speed * 360 + d / n * omega,
            r = radiusRange[0] + (radiusRange[1] - radiusRange[0]) * (Math.sin(((elapsed % speed * pulseFactor) / speed) * 2 * Math.PI) / 2 + 0.5);
        d3.select(this)
          .attr('transform', 'rotate(' + theta + ',' + (width/2) + ',' + (height/2)  + ')')
          .attr('rx', r * ellipseFactor)
          .attr('ry', r);
      })
    })

</script>
</body>

https://d3js.org/d3.v4.min.js