JSFiddle - React, Tailwind, and code Playground

by saitam

HTML

<svg
     xmlns="http://www.w3.org/2000/svg"
     width="200mm"
     height="200mm"
     viewBox="0 0 200 200">
    
    
<path 
      d="m 110.51595,80.797791 -5.00762,5.058566 11.28845,-2.786777 z"
      id="path311"
       />
    
<path
      d="m 110.51595,80.797791 6.28083,2.271789 12.96257,0.935445 z"
      id="path309"
      />
      
</svg>

CSS

svg {
  display: block;
  margin: 0 auto;
}

path {
  fill: none;
  stroke: black;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

JavaScript

var paths = [
  {id: '#path309', d: 'M 55.184523,127.42857 34.962798,139.6183 43.46726,120.24702 Z'},
  {id: '#path311', d: 'm 54.389347,121.02185 -10.922087,-0.77483 11.717263,7.18155 z'}
  ];
  
var timeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });

paths.forEach(function(path, index) {
  timeline
  .add({
    targets: path.id,
    d: {
      value: path.d,
      duration: 1000,
      easing: 'easeInOutQuad'
    },
    offset: 1000 + 10 * index
  });
});

timeline
  .add({
    targets: 'path:first-child',
    opacity: {
      value: 1,
      duration: 1000,
      easing: 'easeInOutQuad'
    },
    offset: 2000 + 10 * paths.length
  });