CloneCSS-GSAP Heart lines illusion

index.html

<svg class="animation" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 716 1008">
        <defs>
            <mask id="main-mask" maskUnits="userSpaceOnUse">
                <rect width="716" height="716" y="292" fill="#fff"/>
            </mask>
            <mask id="heart-mask" maskUnits="userSpaceOnUse">
                <path class="heart" fill="#fff" d="M358,412c122-309,712,10.25.5,588C-354,422,236,103,358,412Z"/>
            </mask>
        </defs>
        <rect class="bg" width="716" height="1008" fill="#000113"/>
        <g class="lines-wrap" mask="url(#main-mask)">
            <g class="bg-lines" fill="#00c5f8">
                <rect width="716" height="10" y="252"/>
                <rect width="716" height="10" y="292"/>
                <rect width="716" height="10" y="332"/>
                <rect width="716" height="10" y="372"/>
                <rect width="716" height="10" y="412"/>
                <rect width="716" height="10" y="452"/>
                <rect width="716" height="10" y="492"/>
                <rect width="716" height="10" y="532"/>
                <rect width="716" height="10" y="572"/>
                <rect width="716" height="10" y="612"/>
                <rect width="716" height="10" y="652"/>
                <rect width="716" height="10" y="692"/>
                <rect width="716" height="10" y="732"/>
                <rect width="716" height="10" y="772"/>
                <rect width="716" height="10" y="812"/>
                <rect width="716" height="10" y="852"/>
                <rect width="716" height="10" y="892"/>
                <rect width="716" height="10" y="932"/>
                <rect width="716" height="10" y="972"/>
            </g>
        </g>
        <g mask="url(#main-mask)">
            <path class="heart-base heart" d="M358,412c122-309,712,10.25.5,588C-354,422,236,103,358,412Z"/>
            <g class="heart-wrap" mask="url(#heart-mask)">
                <g class="heart-lines" fill="#00c5f8">
                    <rect width="716" height="10" y="302"/>
                    <rect width="716" height="10" y="262"/>
                    <rect width="716" height="10" y="222"/>
                    <rect width="716" height="10" y="182"/>
                    <rect width="716" height="10" y="342"/>
                    <rect width="716" height="10" y="382"/>
                    <rect width="716" height="10" y="422"/>
                    <rect width="716" height="10" y="462"/>
                    <rect width="716" height="10" y="502"/>
                    <rect width="716" height="10" y="542"/>
                    <rect width="716" height="10" y="582"/>
                    <rect width="716" height="10" y="622"/>
                    <rect width="716" height="10" y="662"/>
                    <rect width="716" height="10" y="702"/>
                    <rect width="716" height="10" y="742"/>
                    <rect width="716" height="10" y="782"/>
                    <rect width="716" height="10" y="822"/>
                    <rect width="716" height="10" y="862"/>
                    <rect width="716" height="10" y="902"/>
                    <rect width="716" height="10" y="942"/>
                    <rect width="716" height="10" y="982"/>
                    <rect width="716" height="10" y="1022"/>
                </g>
            </g>

        </g>
    </svg>

playground.json

{
  "scripts": [
    "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"
  ],
  "styles": []
}

script.js

console.clear();

const animation = document.querySelector(".animation");

const tl = gsap.timeline();

console.log(animation);

tl.from(
  ".heart",
  {
    y: -716,
    duration: 16,
    ease: "expo"
  },
  0.7
);

tl.to(
  ".heart-lines",
  {
    y: -40,
    duration: 4,
    repeat: -1
  },
  0
);

tl.from(
  ".bg-lines rect",
  {
    scale: 0,
    duration: 4,
    transformOrigin: "center center",
    ease: "expo",
    stagger: {
      each: 0.05,
      from: "center",
      ease: "sine.in"
    }
  },
  0
);

tl.to(
  ".bg-lines",
  {
    y: 40,
    duration: 4,
    repeat: -1
  },
  0
);

animation.onclick = () => {
  tl.restart();
};

style.css

html {
	box-sizing: border-box;
}

*, *::after, *::before {
	box-sizing: inherit;
}

html, body, svg {
	height: 100%;
	width:100%;
}

body {
	display: grid;
	place-items: center;
 background-color: #001823;
}

svg {
	cursor: pointer;
}