JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<svg height="600" width="600">
    
<path id= "content" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-dasharray: "5" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
	s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
	C46.039,146.545,53.039,128.545,66.039,133.545z"/>

  Sorry, your browser does not support inline SVG.
</svg>

</body>

CSS

.content1 {
  stroke-dasharray: 10 5;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 15s linear infinite;
}

.content2 {
  stroke-dasharray: 10 5;
  stroke-dashoffset: 1000;
  -webkit-animation: dash_reverse 15s linear infinite;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}


@-webkit-keyframes dash_reverse {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

$(document).ready(function(){
  $(document).mousemove(function(event){
    var content = $("#content");
    var left  = content.offset().left;
    var pageX = event.pageX;
    
    if (pageX<left) {
		$("#content").addClass("content1");
		$("#content").removeClass("content2");
		}
    else {
		$("#content").addClass("content2");
		$("#content").removeClass("content1");
		}
  });
});