JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<svg style="position:absolute;top:100px;" width="227.33333333333334" height="58" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="jtk-connector">
<path d="M 221.33333333333334 -3 L 0 49 " transform="translate(3,6)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="#7a7a7a" style="" stroke-width="2"></path>
<path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M0,49 L9.561939795024346,50.348817021070595 L5.45838099202481,47.71760928500622 L7.960952635231863,43.534358853748735 L0,49" class="" stroke="#7a7a7a" fill="#7a7a7a" transform="translate(3,6)"></path>
</svg>

CSS

.aa {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  offset-path: path('M 221.33333333333334 -3 L 0 49 ');
  offset-distance: 0%;
  animation: red-ball 2s linear normal infinite;
}

@keyframes red-ball {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

JavaScript

let $connector = $('.jtk-connector')
let style = $connector.attr('style')
let html = `<div class="aa" style="${style}"></div>`;

console.log($connector.attr('style'))

$connector.append(html)