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-background" r="155" 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;
}

.planet-background {
  fill: steelblue;
}

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

JavaScript

const startRadius = 150;
const endRadius = 150;
const endHaloRadius = 300;

const duration = 3000;

const growHalo = () => {
  d3.select(".halo")
    .attr("r", startRadius)
    .style("opacity", 1)
    .transition()
    .duration(duration / 3)
    .ease(d3.easeLinear)
    .attr("r", endHaloRadius)
    .styleTween("opacity", function() {
       return function(t) { return 1 - t; }
    });
    
    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();