CODEWITHSUNDEEP
javascriptreact-nativeanimationsvg-animate
Erik
Erik

Reputation: 1

Animating ball around SVG path in React-Native

I am trying to animate a ball around an SVG path in React-Native and am not quite sure how to go about doing it, the SVG path is a pill shape.

Here is my code so far,

<View style={styles.container}>
  <Svg height="500" width="400">
    <Path
      d="M80 340 A100 100 0 0 0 320 340 v-200 A100 100 0 0 0 80 140 v200"
      fill="none"
      stroke="#eaeaea"
      strokeWidth="16"
    />
    <Circle cx="320" cy="160" r="16" fill="#512468" />
  </Svg>
</View>

And here is a visual:

Environment Visual

Upvotes: 0

Views: 29

Answers (1)

Sean Lin
Sean Lin

Reputation: 404

<body>
<Svg height="500" width="400">
    <Path
      d="M80 340 A100 100 0 0 0 320 340 v-200 A100 100 0 0 0 80 140 v200"
      fill="none"
      stroke="#eaeaea"
      strokeWidth="16"
      id="move-path"
    />
    <Circle r="16" fill="#512468" >
      <animateMotion dur="10s" repeatCount="indefinite">
        <mpath href="#move-path" />
      </animateMotion>
    </Circle>
  </Svg>
</body>

Upvotes: 0

Related Questions