JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<button class="toggle">Click Here</button>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
	s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
	C46.039,146.545,53.039,128.545,66.039,133.545z" />
</svg>

CSS

svg {
    display:none;
    
}

.rotate {
-webkit-transform: translateZ(150px)  /* first picture */
-webkit-transform: translateZ(-150px) /* second picture */
-webkit-transform: rotateY(360deg)    /* their container */ 
transform: translateZ(150px)  /* first picture */
transform: translateZ(-150px) /* second picture */
transform: rotateY(360deg)    /* their container */     
    
}
.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: dash 5s linear;
}
@keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 1;

    }
}

JavaScript

$('.toggle').click(function () {
    $('svg').toggle().addClass('rotate');
    
});