Skip to content

Instantly share code, notes, and snippets.

@nbremer

nbremer/.block

Last active January 26, 2018 07:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nbremer/a14b2d061ee77ced5d2790260106f407 to your computer and use it in GitHub Desktop.
Save nbremer/a14b2d061ee77ced5d2790260106f407 to your computer and use it in GitHub Desktop.
Download ZIP
Film Flowers - Petal Nadieh
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment