JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div id='i'></div>

CSS

<svg style='vertical-align:middle;opacity:0.5' width=\"13\" height=\"13\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6 3c2.58 0 4.23 2.07 4.84 3-.62.93-2.26 3-4.84 3s-4.23-2.07-4.84-3c.62-.93 2.26-3 4.84-3m0-1c-4 0-6 4-6 4s2 4 6 4 6-4 6-4-2-4-6-4zm0 2a2 2 0 1 0 2 2 2 2 0 0 0 -2-2z\" fill=\"LightSlateGrey\"/></svg>

JavaScript

var s = 
"<svg style='vertical-align:middle;opacity:0.5' width=\"13\" height=\"13\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><path id='glass_1' d=\"m6 3c2.58 0 4.23 2.07 4.84 3-.62.93-2.26 3-4.84 3s-4.23-2.07-4.84-3c.62-.93 2.26-3 4.84-3m0-1c-4 0-6 4-6 4s2 4 6 4 6-4 6-4-2-4-6-4zm0 2a2 2 0 1 0 2 2 2 2 0 0 0 -2-2z\" fill=\"green\"/><animate xlink:href=\"#glass_1\"     attributeName=\"d\"    attributeType=\"XML\"    from=\"m6 3c2.58 0 4.23 2.07 4.84 3-.62.93-2.26 3-4.84 3s-4.23-2.07-4.84-3c.62-.93 2.26-3 4.84-3m0-1c-4 0-6 4-6 4s2 4 6 4 6-4 6-4-2-4-6-4zm0 2a2 2 0 1 0 2 2 2 2 0 0 0 -2-2z\"        to=\"m6.1 5.9c2.6 0 3-0.019 4.7 0.092-1.4 0.58-2.2 0.59-4.7 0.59s-3.8 0.0053-4.9-0.59c1.2-0.069 2.4-0.092 5-0.092m0-1c-4 0-6.1 1.1-6.1 1.1s2.1 1.6 6.1 1.6c4 0 5.9-1.6 5.9-1.6s-1.9-1.1-5.9-1.1zm-0.13-0.91c-1.8 0-2.7 2.2-1.4 3.4s3.4 0.37 3.4-1.4c0-1.1-0.9-2-2-2z\"  delay=\"5s\" repeatCount=\"2\"   dur=\"0.5s\" /></svg>";

$('#i').html(s);