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
license: gpl-3.0 |
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
<!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> |