Built with blockbuilder.org
forked from sxywu's block: DS July: Code 1
forked from sxywu's block: Film Flowers Petal Starter Code
license: gpl-3.0 |
Built with blockbuilder.org
forked from sxywu's block: DS July: Code 1
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> | |
// draw petal | |
var petals = [ | |
[ | |
'M0,0', | |
'C50,40 50,70 20,100', | |
'L0,85', | |
'L-20,100', | |
'C-50,70 -50,40 0,0' | |
], | |
[ | |
// write your svg path here | |
] | |
]; | |
d3.select('svg').selectAll('path') | |
.data(petals).enter().append('path') | |
.attr('stroke', '#000') | |
.attr('stroke-width', 2) | |
.attr('fill', 'none') | |
.attr('d', function(d) {return d.join(' ')}) | |
.attr('transform', function(d, i) { | |
var x = (i % 3 + 0.5) * 150; | |
var y = (Math.floor(i / 3) + 0.5) * 150; | |
return `translate(${x}, ${y})`; | |
}) | |
</script> | |
</body> |