JSFiddle - React, Tailwind, and code Playground
by Dogbert
HTML
<script src="https://rawgit.com/lcdsantos/jquery-drawsvg/master/public/jquery.drawsvg.js"></script>
<svg version="1.1" id="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400px" height="200px" viewBox="0 0 400 200" enable-background="new 0 0 400 200" xml:space="preserve">
<g>
<path d="M3.554,111.744H3.81c3.2,1.664,7.935,2.561,11.135,2.561c6.336,0,9.536-2.944,9.536-7.68
c0-11.008-20.606-6.976-20.606-22.143c0-5.951,3.775-12.287,14.207-12.287c3.2,0,7.36,0.64,9.855,1.728l0.576,5.376h-0.256
c-2.944-1.216-7.04-1.92-9.791-1.92c-6.399,0-8.511,3.2-8.511,6.655c0,10.367,20.67,6.464,20.67,22.079
c0,6.015-3.648,13.375-15.295,13.375c-4.224,0-9.407-1.088-11.327-2.24L3.554,111.744z"/>
<path d="M45.665,118.848h-6.335V72.835h6.335V118.848z"/>
<path d="M58.145,72.835h14.783c12.031,0,20.927,4.992,20.927,21.887c0,16.575-7.359,24.126-22.654,24.126H58.145V72.835z
M72.032,113.856c10.368,0,15.231-6.527,15.231-18.559c0-16.127-7.487-17.471-18.878-17.471H64.48v36.029H72.032z"/>
<path d="M103.392,72.835h14.783c12.031,0,20.927,4.992,20.927,21.887c0,16.575-7.359,24.126-22.654,24.126h-13.055V72.835z
M117.279,113.856c10.368,0,15.231-6.527,15.231-18.559c0-16.127-7.487-17.471-18.878-17.471h-3.904v36.029H117.279z"/>
<path d="M158.303,72.835h7.423l16.063,46.013h-6.592l-4.288-12.606h-18.046l-4.16,12.606h-6.528L158.303,72.835z M154.271,101.313
h15.295l-7.744-22.782L154.271,101.313z"/>
<path d="M179.936,72.835h34.494v5.504h-13.952v40.509h-6.271V78.339h-14.271V72.835z"/>
<path d="M237.982,72.835h6.398l11.072,38.653h0.064l9.15-38.653h6.271l-11.838,46.013h-7.488L243.23,90.69h-0.129l-8.127,28.157
h-7.104l-12.543-46.013h6.527l10.047,38.718l0.129,0.063l8.574-29.821L237.982,72.835z"/>
<path d="M274.783,96.449c0-14.079,6.719-24.254,20.734-24.254c14.08,0,19.326,10.432,19.326,22.782
c0,12.991-5.631,24.511-20.414,24.511C279.84,119.488,274.783,108.225,274.783,96.449z...
CSS
body {
text-align: center;
background: black;
}
#first path {
fill: none;
stroke: red;
}
button {
display: block;
width: 50px;
height: 20px;
margin: 10px auto;
}
JavaScript
$("svg path").each(function() {
var $this = $(this);
if($this.attr("fill") && !$this.attr("stroke")) {
$this.attr("stroke", $this.attr("fill"));
$this.removeAttr("fill");
}
});
$("svg").each(function() {
var $svg = $(this);
var $button = $("<button>").text("Go").click(function() {
$svg.drawsvg().drawsvg("animate");
});
$svg.after($button);
});