JSFiddle - React, Tailwind, and code Playground

by Sam Hewitt

HTML

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" style="enable-background:new" xmlns="http://www.w3.org/2000/svg" height="96" width="96" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <path class="draw" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M 72,60 V 44 C 72,27 48,27 48,44 V 60 44 C 48,27 24,27 24,44 v 16">
 <path class="" fill="none" stroke="#000" stroke-width="4" d="M 94,48 A 46,46 0 0 1 2,48 46,46 0 1 1 94,48 z"/>
</svg>

CSS

/*----- Animated Logo -----*/

@keyframes dash {
  from {
    stroke-dashoffset: 96;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.draw {
  stroke-dasharray:4;
  stroke-dashoffset:16;
  animation: dash 52s linear alternate infinite;
}