Skip to content

Instantly share code, notes, and snippets.

@GitNoise

GitNoise/.block

Last active November 27, 2019 09:19
Show Gist options
  • Save GitNoise/6f4448ead1dd6df161319e409d7c29b6 to your computer and use it in GitHub Desktop.
Save GitNoise/6f4448ead1dd6df161319e409d7c29b6 to your computer and use it in GitHub Desktop.
Download ZIP
growing dot to image
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
svg {
width: 500px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<svg>
<defs>
<pattern
id="image"
height="100%"
width="100%"
patternContentUnits="objectBoundingBox"
>
<image preserveAspectRatio="none" width="1" height="1"
xlink:href="https://www.thoughtco.com/thmb/9Iur-wxRku7XHhcwTQlpRujEWQM=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages-961329498-5c4e4102c9e77c00014afb37.jpg"
/>
</pattern>
</defs>
</svg>
<script>
var svg = d3.select("svg")
svg.append('circle')
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 10)
.attr("opacity", 1)
svg.select('circle')
.datum(1000)
.transition()
.delay(1000)
.duration(1000)
.attr("r", d => d)
svg.append('rect')
.datum(100)
.transition()
.delay(250)
.duration(1000)
.attr("x", 0)
.attr("y", 0)
.attr("width", 500)
.attr("height", 200)
.attr('fill', 'url(#image)')
.attr("opacity", 0)
.transition()
.duration(1000)
.attr("opacity", 1)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment