JSFiddle - React, Tailwind, and code Playground

by so 87

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>
<div class="back-red hide">
<svg id="my-svg" width="500" height="500" viewBox="0 0 500 500"></svg>
</div>
<p id="state"><p>

CSS

.hide {
	opacity:0;
}
.back-red {
	background-color:red;
	width:200px;
	height:200px;
}
.circle {
  fill: transparent;
  stroke: black;
  stroke-width: 3px;
}

JavaScript

function runAnim() {
	$('#state').text('start')

	const container = document.getElementById('my-svg')
	const ns = 'http://www.w3.org/2000/svg'
	const circle = document.createElementNS(ns, 'circle')
	const color = `rgba(200,255,255,1)`
	circle.setAttribute('cx', 100)
	circle.setAttribute('cy', 100)
	circle.setAttribute('r', 50 - 4)
	circle.setAttribute('class', 'circle')
	circle.style.stroke = color
	container.appendChild(circle)

	const opt = {
		type: 'scenario-sync',
		duration: 70,
		forceRender: false,
		animTimingFunction:Vivus.EASE,
		start: 'autostart',
	}
	new Vivus('my-svg', opt, ()=>{ $('#state').text('end') })
}

$( function (){
	$('div.back-red').animate({opacity: 1}, {duration:2000, complete: runAnim });
} );