block by nbremer a14b2d061ee77ced5d2790260106f407

Film Flowers - Petal Nadieh

Full Screen

Created my own “film flower” during Shirley Wu’s dataviz workshop :D

Built with blockbuilder.org. Forked from sxywu‘s block: Film Flowers Petal Starter Code

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    svg {
      width: 900px;
      height: 900px;
    }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    var svg = d3.select('svg')
    	.append("g")
    	.attr("transform", "translate(150,150)")
        
		//Create the blur filter
    svg.append("defs")
      	.append("filter")
				.attr("id", "blur")
				.attr("width", "300%")
    		.attr("height", "300%")
				.attr("x", "-100%")
    		.attr("y", "-100%")
				.attr("color-interpolation-filters","sRGB")
				.append("feGaussianBlur")
				.attr("in","SourceGraphic")
				.attr("stdDeviation","22.5")
    
    //Create 3 circles, and blur them
    svg.selectAll('circle')
    	.data(["#EFB605", "#C20049", "#10A4C0"])
    	.enter().append("circle")
    	.attr('transform', (d,i) => "rotate(" + (360/3 * i) + ")")
    	.attr("r", 47)
    	.attr("cx", 34)
    	.style("mix-blend-mode", "multiply")
    	.style("fill", d => d)
    	.style("filter", "url(#blur)")
      
    
    var petal = [
      'M0,0',
      'L-20,15',
      'C0,30 -20,60 -50,50',
      'C-60,100 -10,80 0,110',
      'C10,80 60,100 50,50',
      'C20,60 0,30 20,15',
      'Z'
    ].join(" ")
        
    //Create the petals
    svg.selectAll('path')
    	.data(d3.range(6))
      .enter().append('path')
    	.attr('transform', (d,i) => "rotate(" + (360/6 * i) + ")")
    	.style('stroke', '#000')
    	.style('fill', 'none')
    	.style("stroke-width", 2)
    	.attr('d', petal)
    
  </script>
</body>