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>
<p>SVG shape 기법</p>
<div class="header" data-path-hover="M99.5,283.5v-171c0,0,54-36,117,27v171C216.5,310.5,171.5,256.5,99.5,283.5z">
    <svg  width="500px" height="500px" viewBox="0 0 500 500" preserveAspectRatio="none" class="header-shape">
  <path fill="#FFFFFF" stroke="#000000" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M360.5,310.5l-27,18
	c4.041,2.694-32.143-18-117-18c0,0-81,0-117,18l-27-18C72.5,310.5,216.5,220.5,360.5,310.5z"/>
<path fill="#FFFFFF" stroke="#000000" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M72.5,310.5V225v-85.5
	c0,0,13.5-9,38.25-13.5s60.75-4.5,105.75,13.5V225v85.5c0,0-18-6.75-45-10.125S108.5,297,72.5,310.5z"/>
<path class="book" fill="#FFFFFF" stroke="#000000" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M72.5,310.5v-171
	c0,0,54-36,144,0v171C216.5,310.5,144.5,283.5,72.5,310.5z"/>
<!--path fill="#FFFFFF" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M99.5,283.5v-171c0,0,27-9,117,27v171C216.5,310.5,171.5,256.5,99.5,283.5z"/-->
<path fill="#FFFFFF" stroke="#000000" stroke-width="6" stroke-linejoin="round" stroke-miterlimit="10" d="M216.5,310.5v-171
	c0,0,54-36,144,0v171C360.5,310.5,288.5,283.5,216.5,310.5z"/>  
    </svg>
</div>

JavaScript

/* Animation 1 */

						var speed = 200,
						easing = mina.easein;

					[].slice.call ( document.querySelectorAll( '.header' ) ).forEach( function( el ) {
						var s = Snap( el.querySelector( 'svg' ) ), path = s.select( '.book' ),
							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 );
						} );
					} );