growing dot to image

<!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.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>

https://d3js.org/d3.v4.min.js