title: Animate a Circle around another circle
body: <p>I'm using <a href="https://github.com/react-native-community/react-native-svg" rel="nofollow noreferrer">react-native-svg</a>.
  I'd like to animate a small circle around another bigger circle. This question is similar to <a href="https://stackoverflow.com/questions/33625497/how-to-animate-a-view-around-a-circle">this one</a>.
  The animation is not tied to any gesture but time. The rotation should take a predefined delay in seconds to complete and should be as smooth as possible. Is it possible to do that with react-native-svg?</p>
  
  <p>To be complete, I have to say that there are other small circles that are plotted every seconds. This is already working by mutating the state every second. But of course I won't animate by mutating the state, will I?</p>
  
  <p>So here is the JSX code I have so far in render():</p>
  
  <pre><code>&lt;Svg style={{ alignContent: 'center' }}
    height="200"
    width="200"&gt;
    &lt;Circle 
      cx="100"
      cy="100"
      r="56"
      stroke="black"
      strokeWidth="2"
      strokeOpacity="1"
      fillOpacity="0" 
    /&gt;
    { 
      /* Bubules (little circles) goes here*/                                                            
      this.bubbles() 
    }
  &lt;/Svg&gt;
  </code></pre>
  
  <p>and the typescript bubbles() method:</p>
  
  <pre><code>bubbles(): React.ReactNode {
      var elements = [];
      for (let tuple of this.state.lorenzPlotData) {
          let color = tuple === this.state.lorenzPlotData.tail ? "red" : "black";
          // We need to normalize data 
          elements.push(&lt;Circle key={tuple[0]} cx={this.normalizePlot(tuple[1])} cy={this.normalizePlot(tuple[2])} r="4" fill={color} fillOpacity="1" /&gt;);
      }
      return elements;
  }
  </code></pre>
  
  <p>Any help appreciated.</p>