JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<span class="object"></span>


<svg class="rightServicespath" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M394.71 528.62L416.55 527.47L440.69 527.47L464.83 525.17L485.52 524.02L505.06 513.68L524.6 504.48L539.54 490.69L551.03 473.45L562.53 453.91L570.57 435.52L576.32 411.38L576.32 390.69L571.72 367.7L563.68 345.86L553.33 327.47L544.14 309.08L537.24 287.24L528.05 265.4L516.55 248.16L503.91 228.62L488.97 212.53L474.02 197.59L456.78 184.94L434.94 182.64L415.4 176.9" id="e1YxGeyHRZ"></path></defs><g><g><g><g><use xlink:href="#e1YxGeyHRZ" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="1"></use></g></g></g></g></svg>

CSS

.object{
  background:red;
  width:100px;
  height:100px;
  display:block;
}

JavaScript

function animpath(){
    var path = anime.path('.rightServicespath path');

    var motionPath = anime({
      targets: '.object',
      translateX: path('x'),
      translateY: path('y'),
      rotate: path('angle'),
      easing: 'linear',
      duration: 2000,
      complete: function(anim) {
          
          animpath();
      },
      loop: false
    });
}
animpath();