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>
<script>
$( function ()
{
	$("body").hide();

	$.when(
		$( "body" ).fadeIn( 2500 )
	).done( function ()
	{
		stroke.play();
	} );
} );
</script>


<div class="back-red">
<svg id="my-svg" width="200" height="200" viewBox="0 0 200 200"></svg>
</div>

<script>
/** SVG用意してるだけなので無視してください */
	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)
</script>

<script>
var stroke;
stroke = new Vivus('my-svg', {
		type: 'scenario-sync',
		duration: 70,
		forceRender: false,
		animTimingFunction:Vivus.EASE,
		start: 'manual',
	});
</script>

<p id="state"><p>

CSS

.back-red {
	background-color:red;
}

.circle {
  fill: transparent;
  stroke: black;
  stroke-width: 3px;
}