walkerjeffd/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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 = 0.92352  ,
        speed = 10000,
        omega = 180,
        scale = 1,
        strokeWidth = 38,
        blur = 0,
        n = 2,
        radiusRange = [100, 104],
        pulseFactor = 4;

    // var opacity = 1 / n;
    var opacity = 0.4

    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>
	<!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 = 0.92352 ,
	speed = 10000,
	omega = 180,
	scale = 1,
	strokeWidth = 38,
	blur = 0,
	n = 2,
	radiusRange = [100, 104],
	pulseFactor = 4;

	// var opacity = 1 / n;
	var opacity = 0.4

	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>