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

	$("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>

CSS

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

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