index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello morph</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>


<div class="animal">
<svg id="test2" viewBox="0 0 364 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g id="start" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="crabgroup" transform="translate(-6.000000, -4.000000)" fill="#CC4428">
            <g id="Group" transform="translate(6.000000, 4.000000)">
                <path class="start" d="M69,152 L69,168 L75.5,168 C80,168 83,171 83,175.5 L83,190.5 C83,195 80,198 75.5,198 L60.5,198 C56,198 53,195 53,190.5 L53,175.5 C53,171 56,168 60.5,168 L68,168 L68,152 L60.8888889,152 C56.3222222,152 52.5166667,148.2 53.2777778,143.64 C57.0833333,121.6 72.3055556,109.44 85.2444444,98.8 C98.9444444,87.4 106.555556,81.32 106.555556,68.4 C106.555556,47.12 89.8111111,30.4 68.5,30.4 C47.1888889,30.4 30.4444444,47.12 30.4444444,68.4 C30.4444444,69.92 30.4444444,71.44 30.4444444,72.96 C31.2055556,76.76 28.9222222,80.56 25.1166667,81.32 L10.6555556,85.88 C6.08888889,86.64 1.52222222,84.36 0.761111111,79.8 C0,76 0,72.2 0,68.4 C0,30.4 30.4444444,0 68.5,0 C106.555556,0 137,30.4 137,68.4 C137,96.52 118.733333,110.96 104.272222,122.36 C92.8555556,130.72 86.0055556,136.8 83.7222222,145.92 C82.9611111,149.72 79.9166667,152 76.1111111,152 L69,152 Z" id="Combined-Shape"></path>
                <path class="end" d="M17.85,62.41 C16.3319333,61.8779595 14.6780667,61.8779595 13.16,62.41 C10.97,63.35 8.47,62.33 7.06,63.04 C5.65,63.75 -0.53,67.34 1.35,79.54 C2.35,83.37 5.57,91.54 13.78,93.85 C16.78,94.55 24.42,94.85 28.78,89.31 C29.62,89.16 43.17,77.8 61.61,84.8 C62.2308179,85.0349127 62.8653169,85.2319414 63.51,85.39 C66.38,86.1 74.84,89.39 84.51,99.61 C91.37,105.22 109.66,124.93 116.66,129.24 C117.836233,129.965574 118.959094,130.774302 120.02,131.66 C122.1,133.39 125.85,135.61 132.58,134.89 L133.41,135.03 C133.41,135.03 127.66,149.28 129.28,154.03 C130.9,158.78 136.16,173.71 136.97,174.27 C137.78,174.83 138.43,176.46 139.56,176.13 C140.69,175.8 145.96,166.98 146.93,165.28 C147.9,163.58 152.27,157.34 153.93,156.21 C155.59,155.08 159.03,152.21 159.52,152.32 C160.01,152.43 166.46,160.86 181.52,150.22 C187.97,146.64 190.96,143.65 195.26,144.6 C199.35,145.51 213.26,147.18 224.01,139.4 C225.023344,138.673855 226.386656,138.673855 227.4,139.4 C231.02,141.97 237.15,146.68 239.4,147.64 C242.09,148.79 261.63,161.4 281.4,160.73 C282.17,160.29 283.97,158.66 281.4,156.3 C278.83,153.94 273.11,152.48 272.03,151.7 C270.95,150.92 266.48,146.36 265.98,145.14 C265.078891,143.056481 264.039922,141.035335 262.87,139.09 C262.57,138.92 262.87,138.41 262.87,138.41 C262.87,138.41 268.79,138.04 270.41,136.82 C272.2,138.34 275.99,141.49 277.04,141.89 C278.09,142.29 280.04,142.67 280.83,141.38 C281.309406,140.403852 281.496909,139.310088 281.37,138.23 C281.37,138.23 289.65,145 298.07,143.42 C298.67,143.04 298.72,140.98 298.07,140.05 L297.42,139.13 C297.42,139.13 303.72,129.57 303.42,128.76 C303.12,127.95 315.76,143.43 329.15,144.88 C339.51,145.49 343.08,144.7 343.08,144.7 C343.08,144.7 345.2,144.52 345.38,144.03 L345.56,143.55 C345.56,143.55 346.71,143.79 346.89,143.43 C347.07,143.07 348.28,141.79 345.5,140.43 C342.72,139.07 334.66,135.1 332.3,133.89 C329.94,132.68 325.46,126.02 319.94,124.44 C320.521643,120.323128 321.309298,116.238001 322.3,112.2 C322.91,110.2 328.72,92.92 331.45,87.72 C331.33,86.72 331.39,86.03 330.45,85.49 C329.51,84.95 327.3,83.55 328.45,82.89 C329.6,82.23 331.3,81.98 332.33,82.89 C333.36,83.8 333.6,85.01 334.09,84.22 C334.396272,83.7327917 334.785481,83.3029691 335.24,82.95 C335.24,82.95 333.71,71.36 337.89,63.87 C342.07,56.38 351.57,42.05 355.11,38.51 C356.11,37.04 362.6,27.13 363.43,25.01 C364.26,22.89 365.26,20.12 363.96,19.76 C362.66,19.4 358.06,24.95 356.82,25.76 C355.58,26.57 325.92,52.82 321.28,65.13 C316.64,77.44 310.34,90.78 309.4,100.13 C309.055458,102.211742 308.981512,104.329295 309.18,106.43 C309.18,106.65 306.57,109.33 300.05,108.75 C293.53,108.17 282.55,106.25 278.48,104.92 C277.72,101.54 278.4,101.27 277.72,101.27 C277.04,101.27 274.91,101.46 274.91,101.46 C274.91,101.46 276.54,95.61 274.68,92.57 C272.82,89.53 272.36,89.3 272.36,89.3 C272.36,89.3 265,95.94 257.09,91.19 C251.8,86.38 252.44,87.66 252.01,86.92 C251.58,86.18 248.7,82.49 247.52,82.32 C246.34,82.15 241.27,76.55 233.79,73.88 C226.31,71.21 221.61,66.72 220.49,66.24 C219.37,65.76 219.49,65.39 218.57,65.44 C217.65,65.49 211.36,64.21 211.36,64.21 C211.36,64.21 210.18,63.21 210.13,62.71 C210.08,62.21 211.25,62.07 211.13,61.27 C211.01,60.47 209.58,57.58 209.21,55.66 C208.84,53.74 208.83,41.05 214.07,28.39 C217.42,19.78 218,18.5 218.29,16.75 C218.58,15 222.66,5.38 222.8,3.97 C222.94,2.56 223.08,-0.13 219.41,1.5 C215.74,3.13 199.07,12.62 191.61,22.37 C184.15,32.12 173.25,48.88 173.25,48.88 C172.826777,49.1337305 172.574194,49.5967992 172.59,50.09 C172.714494,51.0426763 172.418902,52.0024381 171.78,52.72 C171.02,53.58 169.56,54.89 169.56,54.89 C168.762592,56.3281808 167.440662,57.402921 165.87,57.89 C163.19,58.75 153.67,65.6 139,68.81 C137.45,69.4 132.31,69.35 129,69.61 C126.051408,69.7131975 123.109854,69.2585628 120.33,68.27 C120.01,67.95 119.15,66.93 118.78,66.82 C118.41,66.71 118.67,66.18 118.67,66.18 C118.67,66.18 125.2,61.84 129.43,61.95 C133.66,62.06 134.14,62.54 134.94,62.11 C135.74,61.68 139.28,63.61 146.39,54.56 C148.26,52.69 151.96,48.99 149.66,40.75 C147.36,32.51 136.55,30.69 133.39,31.38 C130.177311,31.9576825 127.137631,33.2569833 124.5,35.18 C121.93,37.18 118.24,39.78 117.22,40.53 C116.2,41.28 110.74,44.71 109.41,44.76 C108.08,44.81 97.02,48.12 94.19,48.4 C91.36,48.68 82.19,48.4 80.38,48.67 C77.0077098,49.4971931 73.7784875,50.8252867 70.8,52.61 C69.7509158,53.3059037 68.5189029,53.6748115 67.26,53.67 C65.8,53.67 64.65,53.55 64.47,53.61 C64.29,53.67 51.57,53.43 50.2,54.34 C48.65,54.52 47.09,55.34 46.63,56.34 C46.17,57.34 41.63,59.91 40.96,60.34 C40.29,60.77 32.55,64.09 27.24,63.27 C23.77,62.9 20.25,63.61 17.85,62.41 Z" id="Shape"></path>
            </g>
        </g>

    </g>

</svg>
<img src="ressources/heureux.png" alt="heureux" class="final">
</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
    <script src="morphsvg.js"></script>
    <script src="script.js"></script>
</body>
</html>