<h2>This word has a 
  <span class="js-hover">hover
  <svg aria-hidden="true" class="gsap-swipe" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 370 436">
  <defs>
     <filter id="duotone">
        <!-- Grab the SourceGraphic (implicit) and convert it to grayscale -->
        <feColorMatrix type="matrix" values=".33 .33 .33 0 0
              .33 .33 .33 0 0
              .33 .33 .33 0 0
              0 0 0 1 0">
        </feColorMatrix>

        <!-- Map the grayscale result to the gradient map provided in tableValues -->
        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR type="table" tableValues=".6823529412 .9960784314"></feFuncR>
            <feFuncG type="table" tableValues=".5607843137 .9725490196"></feFuncG>
            <feFuncB type="table" tableValues=".8588235294 .7058823529"></feFuncB>
        </feComponentTransfer>
       
       	<feComponentTransfer color-interpolation-filters="sRGB">
				  <feFuncR type="gamma" exponent="1.5" amplitude="1" offset="0"></feFuncR>
				  <feFuncG type="gamma" exponent="1.5" amplitude="1" offset="0"></feFuncG>
				  <feFuncB type="gamma" exponent="2" amplitude="1.5" offset="0"></feFuncB>
		    </feComponentTransfer> 
    </filter>
     
     <mask id="swipeMask">
      <rect class="maskSwipe" width="370" height="436" fill="white"/>
    </mask>
   </defs>
  <g id="Layer_1" data-name="Layer 1">
    <image filter="url(#duotone)" mask="url(#swipeMask)" width="370" height="436" xlink:href="https://assets.codepen.io/756881/me.jpg"/>
    </g>
  <g id="objects">
     <rect class="swipe" width="370" height="436" fill="#fef8b4" />
     <rect class="swipe" width="370" height="436" fill="#ae8fdb" />
    <path id="hello" d="M239.33,62.7s9.28-6.42,12.19-17.35,1.24-14.67.83-15.65-1.35-3.31-4.19-2.94-3.67,3.58-3.25,5.81,5.58,39.43,6.82,40.05,2.68-16.78,6.82-18.83,7.95,5.72,10.22,7,4.71,2.36,8.3.85C288,57,292.64,51.35,289,46.64s-8.93-2-10.89.72A11.63,11.63,0,0,0,276.7,58.6c1.8,4.09,8.35,4.41,11.35,3.79s8.1-2.22,11.36-7.28,3.93-16.53,3.15-21.23-2.06-7.07-3.46-7.59-4.73-.7-5,2.71.61,12.64,4.11,16.93,6.56,8.62,11.36,9.81,7.92-.74,9.31-2.59,5.43-8.9,5.47-15.45.84-17.36-2.06-17.67-3.88,1-4.55,4.76a27.35,27.35,0,0,0,2.4,15.37c2.61,5.42,8.3,7.58,13.1,8.45s12.5-1.81,14.36-3,6.23-2.76,5.51-9.21-4.32-8.77-8.95-8.72-8.5,2.81-8.81,9,2.48,12.2,12.58,9" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
    <path class="swoop" d="M110.62,98.28c0,39.79-37.57,41.55-49.4,67.67s18,70.94-8,96.95-31,39.42-30.41,91.79" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4"/>
    <g id="speech">
       <path class="line" d="M254.13,160.14s7-21.32,8.06-28.74" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
      <path class="line" d="M272.94,169.61s12.42-15.58,24.84-22.34" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
       <path class="line" d="M283.88,184.74s23.1-6.06,31.89-9.93" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>

    </g>
    <g id="SHAPES">
      <polyline class="shape" points="27.02 87.91 25.84 99.2 37.11 100.45 35.93 111.73 47.22 112.99 46.04 124.29" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
      <g class="shape">
        <path d="M322.14,266.6l-1.65,4.66c-.9,2.56-.5,3.59,1.14,4.27l.75.31-1.71,4.1-2.62-1.09c-2.91-1.2-4.31-3.65-3.1-7.22l2.16-6.26c.73-2.16.52-3-1.44-3.81l1.7-4.11c2,.82,2.7.38,3.71-1.66l2.91-6c1.68-3.37,4.4-4.11,7.31-2.9l2.62,1.09-1.7,4.1-.75-.31c-1.64-.68-2.65-.24-3.83,2.21l-2.13,4.46c-.79,1.65-2.09,3.19-4.73,2.8C322.93,262.86,322.75,264.87,322.14,266.6Z" fill="#fff"/>
        <path d="M339.87,264.44l1.66-4.66c.9-2.57.5-3.59-1.14-4.27l-.76-.31,1.71-4.11,2.62,1.09c2.91,1.21,4.31,3.66,3.11,7.22l-2.16,6.27c-.73,2.16-.53,3,1.44,3.81l-1.7,4.1c-2-.82-2.71-.37-3.72,1.67l-2.91,6c-1.67,3.36-4.4,4.11-7.3,2.9L328.09,283l1.7-4.1.75.31c1.64.68,2.65.24,3.83-2.21l2.13-4.46c.79-1.65,2.09-3.2,4.73-2.8C339.08,268.17,339.26,266.16,339.87,264.44Z" fill="#fff"/>
      </g>
      <polygon class="shape" points="312.58 117.09 337.65 100.56 310.79 87.11 312.58 117.09" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
      <g class="shape">
        <path d="M103.14,55.11l-1.88-3.82,8.93-9.22L97.44,43.55l-1.89-3.83,18.65-2,1.86,3.77Z" fill="#fff"/>
        <path d="M63.09,67.65l-1.87-3.77,12.92-13.6L76,54.11l-8.94,9.22,12.76-1.48,1.88,3.83Z" fill="#fff"/>
        <path d="M86.87,39.08l3.3-1.63,2.41,29-3.3,1.63Z" fill="#fff"/>
      </g>
    </g>
  </g>
</svg>
</span> 
effect</h2>
@import url('https://fonts.googleapis.com/css2?family=Signika:wght@700&display=swap');

body {
  --color-dark: rgb(64, 64, 64);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #6edcc0;
  font-family: 'Signika', sans-serif;
  color: var(--color-dark);
}

h2 {
  font-size: 3.5rem;
}

.js-hover {
  position: relative;
  color: var(--color-dark);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--color-dark);
}

.js-hover:hover {
  -webkit-text-fill-color: var(--color-dark);
}

.js-hover:hover svg {
   display: block;
   opacity: 1;
}

.js-hover svg {
  opacity: 0;
  display: none;
  position: absolute;
  width: 300px;
  bottom: -1rem;
  left: -1rem;
  z-index: -1;
  
}
const tl = gsap.timeline({paused: true});

tl.from(
    ".gsap-swipe",
    {
      y: 20,
      x: 20,
      rotate: -40,
      duration: 3,
      transformOrigin: '30% 80%',
      ease: Elastic.easeOut.config(1, 0.5),
    }, 0
  )
  .fromTo(
    ".swipe",
    {
      xPercent: -100
    },
    {
      duration: 1,
      xPercent: 100,
      ease: Sine.easeInOut,
      stagger: {
        each: 0.15
      }
    }, 0
  )
  .from(
    ".maskSwipe",
    {
      xPercent: -100,
      ease: Sine.easeInOut
    },
    0.4
  )
  .from(
    "#hello",
    {
      duration: 1.5,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".swoop",
    {
      duration: 2,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".line",
    {
      drawSVG: "0%",
      duration: 0.5,
      stagger: {
        each: 0.2
      }
    },
    1
  )
  .from(
    ".shape",
    {
      scale: 0,
      duration: 1.3,
      transformOrigin: "50% 50%",
      rotate: '+=random(-60, 60)',
      ease: Elastic.easeOut.config(1, 0.8),
      stagger: {
        each: 0.2
      }
    },
    0.2
  );

// ScrubGSAPTimeline(tl);

let hover = document.querySelector('.js-hover');

hover.addEventListener('mouseover', playTl);
hover.addEventListener('mouseout', resetTl);

function playTl(){
  tl.timeScale(1.25).restart();
}

function resetTl(){
  tl.progress(0).pause();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline.js