Circle Growing

Animation of a circle growing with pulses

by IPWright83

HTML

<svg width="800" height="800">
  <defs>
    <radialGradient id="halo-gradient">
      <stop offset="0%" stop-opacity="0" stop-color="#AAA" />
      <stop offset="100%" stop-opacity="0.1" stop-color="#AAA" />
    </radialGradient>
  </defs>
  <circle class="halo" r="150" cx="450" cy="450" ></circle>
  <circle class="planet" r="150" cx="450" cy="450"></circle>
</svg>

CSS

body {
  background: #21272e;
}

.planet {
  fill: steelblue;
  stroke: white;
  stroke-width: 5px;
}

.halo {
  fill: url(#halo-gradient);
  stroke: #AAA;
}

JavaScript

const startRadius = 150;
const endRadius = 150;
const endHaloRadius = 900;

const duration = 3000;

d3.select(".planet")
  .attr("transform", "rotate(-90, 450, 450)");

const growHalo = () => {
  d3.select(".halo")
  	.attr("r", startRadius)
    .transition()
    .duration(duration)
    .ease(d3.easeLinear)
    .attr("r", endHaloRadius);
    
    grow();
};

const grow = () => {
  d3.selectAll(".planet")
    .attr("r", startRadius)
    .style("stroke-dasharray", 942)
    .style("stroke-dashoffset", 942)
    .transition()
    .duration(duration)
    .ease(d3.easeLinear)
    .style("stroke-dashoffset", 0)
    .on("end", growHalo);
};

/* const shrink = () => {
  d3.selectAll(".planet")
    .attr("r", endRadius)
    .transition()
    .duration(500)
    .ease(d3.easeLinear)
    .attr("r", startRadius)
    .on("end", grow);
}; */

grow();