title: How to animate an SVG circle dynamically given a list of values?
body: <p>I have a list of values such as:</p>
  <p><code>[10, 20, 20, 30, 10, 10, 10, 20, 20, ...]</code></p>
  <p>That can change before the animation starts.</p>
  <p>The goal is to take an SVG circle and do the following:</p>
  <ul>
  <li>Index i = 0</li>
  <li>Smooth set radius to list[i] over X seconds</li>
  <li>Increase i</li>
  <li>Smooth set radius to list[i] over X seconds</li>
  <li>Increase i</li>
  <li>...</li>
  </ul>
  <p>I currently use <code>Animate.timing</code> and <code>onComplete</code> I start a new one but it seems like an inefficient way (and perhaps it can add some delays) to setup a pre-planned animation. Is there a way to tell the SVG object to change shape at given timings and given durations?</p>
  <p>I am imagining to be able to tell the circle to:</p>
  <p><code>[{from_radius: 10, to_radius: 20, duration: 0.25}, {from_radius: 20, to_radius: 20, duration: 0.25}, {from_radius: 20, to_radius: 30, duration: 0.25}, ...]</code></p>
  <p>And give that to the circle to handle it automatically.</p>