JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="header" data-path-hover="M4.5,395.5c0,0,213.5-635.5,392.5,4.5">
    <svg  width="500px" height="500px" viewBox="0 0 500 500" preserveAspectRatio="none" class="header-shape">
      <path fill="none" stroke="#000000" stroke-width="10" d="M4.5,395.5c0,0,155.5,4.5,392.5,4.5" />
    </svg>
</div>

JavaScript

/* Animation 1 */

						var speed = 2000,
						easing = mina.elastic;

					[].slice.call ( document.querySelectorAll( '.header' ) ).forEach( function( el ) {
						var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
							pathConfig = {
								from : path.attr( 'd' ),
								to : el.getAttribute( 'data-path-hover' )
							};

						el.addEventListener( 'mouseenter', function() {
							path.animate( { 'path' : pathConfig.to }, speed, easing );
						} );

						el.addEventListener( 'mouseleave', function() {
							path.animate( { 'path' : pathConfig.from }, speed, easing );
						} );
					} );