film flowers washi tape, positions remembered by sxywu

Built with blockbuilder.org

forked from sxywu‘s block: DS July: Code 1

forked from sxywu‘s block: DS July: Code 2

forked from sxywu‘s block: DS July: Code 3

forked from sxywu‘s block: DS July: Code 4

forked from sxywu‘s block: DS July: Code 5

forked from sxywu‘s block: DS July: Code 6

forked from sxywu‘s block: DS July: Code 7

forked from sxywu‘s block: film flowers washi tape

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js'></script>
  <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700' rel='stylesheet' type='text/css'>
  
  <style>
  </style>
</head>

<body>
  <svg></svg>
  
  <script>
    const width = 4134;
    const height = 213;
    var strokeColor = '#444';
    var flowerSize = 200;
    
    var svg = d3.select('svg');
    const defs = d3.select('svg')
      .style('isolation', 'isolate')
    	.attr('width', width)
      .attr('height', height)
      .append("defs");
    defs.append("filter")
      .attr("id", "motionFilter") 	//Give it a unique ID
      .attr("width", "300%")		//Increase the width of the filter region to remove blur "boundary"
      .attr("x", "-100%") 			//Make sure the center of the "width" lies in the middle of the element
      .append("feGaussianBlur")	//Append a filter technique
      .attr("in", "SourceGraphic")	//Perform the blur on the applied element
      .attr("stdDeviation", "8 8");	//Do a blur of 8 standard deviations in the horizontal and vertical direction
  
    d3.json('positions.json', function(movies) {
     
      const flowers = d3.select('svg').selectAll('g.flower')
        .data(_.values(movies)).enter().append('g')
        .classed('flower', true)
        .attr('transform', d => `translate(${d.x}, ${d.y})rotate(${d.rotate})scale(${d.scale})`);

      // colors
      flowers.selectAll('circle')
        .data(d => d.colors).enter().append('circle')
        .attr('cy', d => d.cy)
        .attr('r', 0.35 * flowerSize)
        .attr('fill', d => d.fill)
        .attr('transform', d => `rotate(${d.angle})`)
        .style("filter", "url(#motionFilter)")
        .style('mix-blend-mode', 'multiply');

      // petals
      flowers.selectAll('path')
        .data(d => d.petals).enter().append('path')
        .attr('transform', d => `rotate(${d.rotate})`)
        .attr('d', d => d.path)
        .attr('stroke', strokeColor)
        .attr('stroke-width', d => 3 / d.scale)
        .attr('fill', 'none');
    });
    
  </script>
</body>