JSFiddle - React, Tailwind, and code Playground

by Hakan Bilgin

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
	<svg id="terminal-cursor-heart" viewBox="0 0 480 680" nocache="1">
		<path  fill="var(--color-1)" stroke="var(--color-2)" stroke-width="30" d="M240,563.98c-3.92,0-7.842-1.75-10.782-5.25L76.304,383.164c-1.96-2.042-55.872-60.662-55.872-130.656 c0-85.451,43.864-136.487,117.136-136.487c42.884,0,83.073,40.247,102.433,62.995c19.36-22.748,59.548-62.995,102.433-62.995 c73.272,0,117.136,51.036,117.136,136.487c0,69.994-53.911,128.614-56.116,131.239L250.783,558.73 C247.841,562.23,243.921,563.98,240,563.98z"/>
	</svg>
</svg>
  
<svg class="cursor-blink"><use href="#terminal-cursor-heart"></use></svg>

CSS

.cursor-blink {
			animation: cursorBlink 600ms infinite alternate;
		}
    
    			
@keyframes cursorBlink {
	0%   { opacity: 0; }
	24%  { opacity: 0; }
	25%  { opacity: 1; }
	100% { opacity: 1; }
};