JSFiddle - React, Tailwind, and code Playground

by Pier-Luc Cossette

HTML

<svg version="1.1" id="Layer_1" class="epicerie " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
								 width="289.334px" height="147.667px" viewBox="0 0 289.334 147.667" enable-background="new 0 0 289.334 147.667"
								 xml:space="preserve">
							<g>
								
									<path  class="motEpicerie" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="transparent" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"...

CSS

@keyframes offset{
  100%{
    stroke-dashoffset:0;
  }
}

.motEpicerie{ stroke:#000; stroke-width:3px;
		stroke-dasharray:984;
		stroke-dashoffset:984;
		animation:offset 4s linear forwards;
}