Bendy SVG

In this example below you will see how to do a Bendy SVG with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by osublake, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright osublake ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bendy SVG</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>
  <svg id="svg" viewBox="0 0 538 196">
    <g id="group">
      <path class="st0" data-subdivide="60" d="M0 0h538v196H0z"/>
      <path class="st1" d="M33.4 89.8c-5.5 2.6-10.2 6.6-14.7 10.6-2 1.8-6.4 7.9-6.6 2.1-.4-9.6 8.3-20.3 15-26.2 7.7-6.9 17-11.9 26.4-16.1 6-2.7 12.3-4.9 18.6-7 3.2-1.1 6.5-2 9.8-2.9.5-.1 4.4-.9 4.4-1C82.1 58 72.6 63.6 65 69c-10.2 7.2-20.5 14.9-31.6 20.8m65.7 82.3c1.2 7.1-7.3 7.2-12.3 4.9-7.3-3.3-1.5-9.9 0-15.1 1.9-6.6 0-13.3 1-20 1-6.7 11.9-1.9 16.2-.4-2 5.1-4.9 9.8-5.5 15.4-.4 5.4-.1 9.9.6 15.2zM105 34.8c-.7-4.5-1.4-10.7 3.5-12.9 4.9-2.1 13.8-1.6 14.7 4.8.5 3.4-.3 7.2-.7 10.7-.4 3.5-.6 4.3-4.2 4.9-2.8.5-6.7.9-9.5 0-3.5-1.3-3.4-4.2-3.8-7.5m26.5 128.6c2.4 1.8 14.7 5.4 13.9 8.8-1.1 4.8-14.1 2-17 1.9-4.1-.2-11.7 1.2-15.4-1.2-5-3.2.4-11 0-15.7-.5-5.6-6.2-13.4-4.2-19 .9-2.6 2.3-1.4 4.8-1 4 .7 7.9.5 11.8.1 2.8-.3 3.7-1 4 1.9.3 2.6-1.2 6-1.6 8.6-.5 3.3-.5 6.8-.3 10.2.2 3.4 1.3 3.6 4 5.4"/>
      <path class="st2" d="M112.2 43.8c-12 10.4-30.9 12.5-45.5 17.5-8.6 2.9-17 6.1-25.1 10.2-6.6 3.4-14.6 7.2-18.2 14 7.4-4.3 15.9-4.1 19.9 4.4 3.7 7.7 1.5 17.5 7.7 24.2 7 7.6 17.5 4.3 26.4 6.6 9.1 2.4 13.4 10.7 16.7 18.8 3.9-19 9.8-39.6 25.6-52.3 8.2-6.6 14.6-13.1 11.7-24.5-1.7-6.5-10.6-22-19.2-18.9"/>
      <path class="st2" d="M112.2 43.8c-19.9 6.9-40.7 10.6-60 19.2-16.7 7.5-34.8 19.2-37.8 38.8 14.5-16 36.5-25.3 56.5-32.1C81.4 66.1 92 63 102.5 59.5c1.9-.6 10.2-2.1 11.4-4.1 1-1.8-1.3-9.8-1.7-11.6"/>
      <path class="st1" d="M142.5 93c-1 3.3-2.6 7.4-6.4 8-2.9.4-7.1-2-8.2-4.7-3.3-8.8 15.1-10.9 14.6-3.3zm-36.6-56.5c-.1 1.8.1 5.5-1 7-1.1 1.7-3.1 1.4-4.8 2.1 2.2 6.2 9.5 8.4 15.4 8.9 2.2.2 15.5-.3 13.4-4.1-.9-1.7-4.6-1.3-5.8-2.9-1.6-1.9-.5-4.9-.4-7.1 0-3.4-.8-4.4-4.1-4.8-3.4-.4-9.7-.9-12.7.9"/>
      <path class="st3" d="M106.8 36.5c0 3.6-1.2 6.1.4 9.4 1.2 2.5 3 7 4.9 9 4.7 5.1 12.6 1.5 16.4-2.8-1.7-1.1-6.1-2.4-7.1-4.1-1.4-2.5.3-6.9-.6-9.6-1.2-3.8-10.8-3.8-14-1.9"/>
      <path class="st1" d="M105.9 36.5c-.2 3.9 1.2 6.5 5.3 7.7 3.4.9 8.6.2 10.5-3.2 4.2-7.7-12.4-6.5-15.8-4.5"/>
      <path class="st1" d="M114 43.3c-2.2 0-5.2-.5-6.8-2.2-2-2.1-1.2-4.2-1.2-6.8.1-2.5-1.3-6 .6-8 1.5-1.7 5.3-1.5 7.4-1.5 2.1 0 5.4-.1 7 1.5 2 2 .8 5.6.9 8 .1 2.4.9 4.4-.8 6.4-1.5 2-4.7 2.6-7.1 2.6"/>
      <path class="st1" d="M114 22.5c-3.3 0-8.1.5-8.9 4.3-.2.9 0 8.3 1.5 8-.5-1.5-1.3-6.8 0-8 1.7-1.5 5.6.7 7.5.7 1.9 0 5.8-2.2 7.5-.7 1.3 1.1.5 6.4 0 8 1.4.3 1.8-7.2 1.5-8.1-.9-3.7-5.9-4.2-9.1-4.2zm28.5 70.8c-.6 1.7-1.8 5.2-3.5 6.2-2 1.2-1.5.7-3.4-.9-1.5-1.3-2.5-2.7-4.4-3.5-1.4-.6-3-.3-3.5-2-1.4-5.7 15.6-7.7 14.8.2z"/>
      <path class="st1" d="M130.8 53.6c4.3-.9 8.8.6 11.2 4.4 2.3 3.7.7 7.5 1.8 11.4.6 2.1.3 4.1.8 6.1.5 1.8 2.4 3.1 2.9 5.1 1.1 4.8-1.8 9.6-5.2 12.8-1.1-3.7-4.5-3.8-6.7-5.9-1-1-2.4-2.8-2.5-4.3-.1-.7.7-2.3.5-2.7-.2-.4-1.9-.8-2.3-1.3-4.3-6.2-1.1-18.8-.5-25.6"/>
      <path class="st3" d="M128.8 56.1c5.8-2.8 13.6-.3 13.1 7.1-.1 1.1-.9 2.4-.9 3.4 0 1.8 1.2 2.6 1.8 4.2 1.8 4.9-1.8 5-3.8 8.2 2.6-1.5 5.4-1.7 6.7 1.3 1.4 3.3-1.2 7.4-2.8 10-2.2 3.4-3.5 9.8-9 8.8-7.9-1.5-5.2-7.6.6-9.4 3.6-1.1 2.7-1.2 1.3-4.6-.9-2.1-2.2-5.3 1.2-5.7-9.8-2.1-7.8-15.6-8.2-23.3"/>
      <path class="st1" d="M109.8 50.4c-1.7-2.2-4.3-4.3-7-5.2-3.1-1-3.1.7-5.7 1.2-.7.1-1.4-.7-2.2-.6-1.4.1-2 .8-3.3 1.2-1.9.7-3.9.5-5.7 1.5-5.7 2.9-.9 4.7 3.1 4.9 7 .3 14-1.4 20.8-3z"/>
      <path class="st2" d="M110 50.4c-2.3-.8-3.4-3.3-5.7-4.2-2.4-.9-4.1-.5-6.1.9.5.5.9 1.2 1.2 1.9-1.7-1.9-8.7-3.5-6.5.4-4.5-2.9-13.8 5.5-4.2 5.2 7.1-.3 14.5-2.6 21.3-4.2z"/>
      <path class="st1" d="M126.9 51.8c0-1.1 0-2.2-1-2.9 2.6-1.5 2.6.7 4.3 1.4.6.3 1.3-.2 2 .1 1.7.7 3.9 1.8 5 3.5-1.3-.1-10.3 1.4-10.3-2.1z"/>
      <path class="st2" d="M126.5 51.4c1-1.7 1.6-.6 2.8-.6-.3 0 2.6.5 2.4.5.6.2.9 1.2 1.5 1.5 1.2.5 2.2-1.4 2.9.9-3.5-.1-6.9.4-9.6-2.3z"/>
      <path class="st1" d="M96 49.2c5 1.7 10.3 1.1 15.5 1.2 2.6.1 4.8.6 7.3 1.1 2.5.5 4.3 0 6.8 0 4.5 0 8.4 2.7 10.6 6.5 1 1.7 2 4.2 1.6 6.3-.4 2.2-1.8 1.9-2.7 3.3-.6 1-.1 2.3-.4 3.7-.4 2.2-1.7 4.1-2.6 6.1-1 2.3-1.7 4.6-2 7-.2 1.4.5 5.5-.7 6.5-1.6 1.5-9.2-.7-11.3-1-5.6-.8-11.3-1.5-17-1.4.2-2.7.9-7.3-.7-9.8-1.7-2.7-6.2-4-8.3-6.7-5.2-6.9.3-16.3 3.9-22.8m34.7 48.5c1.9 7 3.2 14.6 1.7 21.7-.6 2.6-1.9 5-2.5 7.6-.7 3.4-1.4 7-2.2 10.6-1.5 7.1-2.6 14.2-3.7 21.4-.4 2.6-.5 3-3.2 2.9-2.8-.1-2.2-.3-2.7-2.6-.6-3.1-.7-6.3-1.8-9.4-1.1-3.1-3.6-5.3-4.8-8.2-1.3-3.2-.4-6.2 1.8-8.8 2.6-2.9 3.1-3.2 2-7.2-1.9-6.8-4.8-15.5-3.4-22.7.7-3.5 2.4-2.9 5.8-3.2 4.2-.5 8.6-1.4 13-2.1"/>
      <path class="st3" d="M129 96.9c1.2 7.5 3.7 15.8 1.6 23.4-.5 2-1.9 3.6-2.5 5.5-.5 1.7-.2 3.4-.4 5.1-.4 3.9-1.8 7.7-2.5 11.6-.6 3.4-1.1 6.8-1.2 10.2-.1 2.1.6 5-.2 7.1-.8 2-1.6 3.2-4.3 2-2.3-1-1.6-2.4-2-5.2-.8-6.2-7-13.2-5-19.5.4-1.3 1.1-2.6 2.1-3.4.7-.6 3.5-1.1 3.6-1.4 1.3-2-1.7-8-2.4-10.1-1.3-3.4-2.4-6.9-3-10.5-.4-2.3-1.9-7.4-1.1-9.7.6-1.7 1.2-1.5 3.5-2.1 4.7-1.1 9.3-2 13.8-3M96 49.2c7.4 2.2 15.6 0 23.1 1.6 6.1 1.3 12-.6 15.4 6.6.9 1.9 2.2 6.5.4 8.2-2.2 2.2-1.8-.7-2.5 2.6-1.4 6.7-4.6 12.5-4.2 19.6-4.4-.2-8.8-.6-13.2-.9-2-.2-6.9.5-8.7-.5-1.7-.9-2.1-3.7-2.2-5.7-.2-3.4.6-2.8 2.7-5.1-4.9.8-8.6-2.7-11.3-6.3-.5-.5-4.7 6.7-2.6.2 1.1-3.2.5-5 .5-8.5.1-3.9 1.3-8 2.6-11.8"/>
      <path class="st1" d="M129.8 89.4c.1 2.6 1.7 7.4.5 9.8-1 2-4.1 3.2-6 4-8.8 4-14.8.9-21.5-5.1-2.4-2.1-3.4-2.9-2.7-6 .6-2.6 1.1-4.4 3.8-5 3.3-.7 8.5.6 11.9.9 4.6.4 9.3.9 14 1.4"/>
      <path class="st3" d="M127.8 89.7c0 3.5 3.2 9.9 1.4 13.2-1.5 2.7-5.4 2.5-8 2.7-7.2.5-14.9-2-18-9.4-1.1-2.6.5-5.4 1.3-8 .9-3 .6-2.7 3.9-2.6 4.5.2 8.9.3 13.4.6 2.3.1 8-.6 6 3.5"/>
      <path class="st1" d="M119.2 101.3c-2.8-5.7-9.3-8.3-15.4-8-3 .1-3.2.3-4.5 2.6-1.3 2.4-2 5.7-2.8 8.3-1.1 3.8-2 7.7-2.3 11.7-.2 3.4 1.5 8 .5 11.1-.9 2.8-3.9 4.6-5 7.6-1.2 3.4-1.2 7.3-.9 10.9.2 2.8 0 2.8 2.3 3.5 1.9.6 6.7 1 8.4.2 5-2.3 4.4-10.8 5.4-15 1.3-5.1 6.2-7.4 8.8-11.7 3.9-6.4 3.5-14.2 5.5-21.2"/>
      <path class="st3" d="M119.2 101.3c-1.6-5.8-14.6-13-18-5.9-4.5 9.2-4.1 19.7-3.4 29.4.3 4.2-3.9 6.7-5.3 10.7-.9 2.5-2.8 10.3-.7 12.5 1.2 1.2 6.2 1.1 7.7-.1 3.1-2.4 3.4-9.7 3.4-13.1 0 .2-1.5 1.2-1.7 1.4.4-2 1.8-2.8 2.8-4.4.6-1 .8-2.3 1.3-3.2 1.7-2.7 5-4.5 6.9-7.5 3.2-5.7 2.4-15.1 7-19.8"/>
      <path class="st1" d="M97 86.8c3 .2 9.5 1.8 9.7 5.8.1 2.6-4.2 5.8-6.5 6.6-3.6 1.2-5.3-.9-6.9-3.5-2.7-4.7-.2-5.9 3.7-8.9m2.2 87.4c-.6 4.9-11.8 4.3-14.5 1.2-2.2-2.5-1.1-4.8 2-4.8 3.7.1 8.8 2.7 12.5 3.6zm13-4.6c0 4.9 9.7 3.2 13.1 3.4 2.6.1 17.4 3.1 18.6.1.9-2.2-10.8-2.1-12.5-2.2-3.2-.3-6.5-.5-9.7-.8-2.9-.2-6.6-1.4-9.5-.5"/>
      <path class="st1" d="M118.8 172.8c5.7 0 11.5 1.2 17.2 1.1 4.2-.1 7-2.5 1.3-3-5.4-.5-10.9-.7-16.4-1.2-1-.1-6.5-1.5-6.3.7.1 1.2 3.1 2.2 4.2 2.4m-29.3-37.9c4.4 2.9 10.1 3.6 15.2 3.3-.5 5.1-3 8.6-5.2 13.1-2.3 4.7-3 10.1-2.8 15.3.1 2.3 3.4 6.4 2.2 8.4-1.2 1.9-5.5 1.3-7.3 1.1-1.9-.2-5.6-.3-7-1.9-2.2-2.4 1.3-8.1 2.2-10.8 3.2-9.1-1.9-19.8 2.7-28.5zm8.4-73.2c7.1-9.6-2.5-16.5-11.8-12.5-4.5 1.9-4.2 5.8-7.2 8.5-2.2 2-3.4 2-4.6 5-.9 2.3-1.4 4.3-2.8 6.4-6 9.8 8.2 15.7 15 19.4 1.6.8 4.1 3 5.9 2.9 1.4-.1 4.6-2.8 4.7-4.4.1-1.5-2.3-3.6-3-4.9-1.5-2.7-1.9-6-3.6-8.6 4.8-1.6 7.9-6.6 7.4-11.8"/>
      <path class="st3" d="M96.6 61.2c.4-.7.9-1.4 1.3-2.2l1.2 1.5c1.3-2 3.2-6.1 2-8.6-1.5-2.8-7-3-9.8-2.7-3.1.4-7.7 2.2-8.5 5.7-.7 3.1 2.5 3.7 3.2 6.6-1.7-2.3-4.7-3.7-7.1-1.6-2.1 1.9-2.5 6.3-3.9 8.8-4 7.1 1.5 11.6 7.5 15.2 3.1 1.8 6.4 4.1 9.6 5.8 2.7 1.4 4.9.2 4-2.9-.4-1.5-2.6-3.4-3.4-4.8-.9-1.5-1.5-3.1-2.3-4.7-1.6-3.3-3.5-6-6.4-8.3 3.1 1.2 5.4 3 8.5.9 2.6-1.5 3.9-5.6 4.1-8.7"/>
      <path class="st1" d="M135.7 62.6c-.3 3.3-3.5 1.4-5.2.8-3.5-1.3-6.8-1.8-10.5-1.6-4 .2-7.8 1.9-11.8 2.1-4.2.1-7.1-2.5-10.2-4.9.1 3.2 4.5 5.4 7.1 6.2 4 1.1 7.8-.6 11.8-1 4.7-.5 9.5-.3 13.9 1.4 3 1.2 7.8 2.3 4.9-3"/>
      <path class="st4" d="M94.8 96.9c.9.5 1.8.9 2.6 1.5-1 0-1.9-.9-2.6-1.5z"/>
      <path class="st3" d="M120.8 25.6c-1.1-3.3-8.7-3-11.1-1.8-4.3 2.3-2.7 10.3-1.8 14.3 1 4.4 5.9 7.7 10.3 4.4 3-2.2 4.2-13.5 2.6-16.9"/>
      <path class="st1" d="M111.3 136.7c5.2 2 11.2 1.1 16.5.3-1.3 6.5-2.1 13.1-2.2 19.7-.1 5.3 1.4 6.9 6.2 8.9 2.7 1.1 9.8 2 11.2 4.9 1.9 3.8-8.5 1.8-10.4 1.6-4.7-.4-9.2-.7-13.9-.7-3.1 0-6.6-.1-5.9-4.1.4-2.5 2.1-4.3 2.2-6.9.1-2.5-.5-5.3-1.2-7.7-1.2-5-4.9-10.9-2.5-16"/>
      <path class="st2" d="M110.3 138.2c-2.4 3.4 2.8 11.7 3.7 14.9.9 3.1 1.4 6.6.7 9.7-.4 1.9-2.3 4.7-1.8 6.6 1.1 4.4 13.1 2.9 16.7 3.3 2.5.2 10.5 2 12.8.1 3.1-2.6-5.7-4.2-7.6-5.3-2.3-1.3-6.3-2.5-8-4.6-2-2.4-1.2-7.1-1.1-10 .1-4 .9-7.8 1.4-11.7.4-3 .8-3-2.3-2.8-3.1.3-6.1.9-9.2.6-.6.1-4.8-1.2-5.3-.8"/>
      <path class="st5" d="M112 172.2c.4.5-.3.4.7.5-.2-.1-.4-.3-.7-.5"/>
      <path class="st1" d="M113.4 165.9c-2.4.5-2.5 4.7-1 6.4 1.3 1.5 4.7 1 6.4.5-1.8 0-5.6.4-6.6-1.5-.5-.9 1.5-5.2 1.2-5.4"/>
      <path class="st1" d="M112.6 169.6c-1.7.6.2 2.2.7 2.6 1.1.9 4.2 1.1 5.5.6-2-.3-5.7-.8-6.2-3.2"/>
      <path class="st1" d="M115.7 171.9c.3.2 3.8 1.4 3.6.4-.2-.8-3.1-.4-3.6-.4m-3.1-2.9c.1.3.1.6.2 1-.1-.3-.2-.7-.2-1"/>
      <path class="st6" d="M112.7 169.8c.5 2.7 4.6 2.2 6.5 2.2-1.1-2.2-5.3.6-6.5-2.2"/>
      <path class="st1" d="M143.3 170.5c.5.7.7 1.6.6 2.4 1.9-1.7 1.2-1.4-.6-2.4"/>
      <path class="st5" d="M142.4 174.3c-.5.2-.5.2 0 0"/>
      <path class="st1" d="M143.1 173.7c-1.2.2-2.5.3-3.7.3 1.1.2 2.8.9 3.7-.3"/>
      <path class="st1" d="M143.8 171.9c0 1.8-5 1.6-6.2 1.8 1 .2 7.9.2 6.2-1.8"/>
      <path class="st1" d="M138.6 173.5c-.5.1-.9.1-1.4.2.5.1 1 0 1.4-.2m5.2-1.6c0 .3 0 .3 0 0"/>
      <path class="st6" d="M143.7 172c-.9.6-2.2 0-3.1.3-1.3.3-1.8.6-3 1.2 1.4.1 5.5.4 6.1-1.5"/>
      <path class="st5" d="M129.1 141.4c0 .2-.1.4-.1.6 0-.3 0-.5.1-.6"/>
      <path class="st1" d="M110.1 141.7c-.1 1-.6 2.2.8 2.5-.1-.6-.1-2.3-.8-2.5m18.4-.8c-1.6 0-1.4 1.7-1.6 2.8.5-.2 3.1-2.8 1.6-2.8"/>
      <path class="st6" d="M110.4 141.8c.1.5.1 2.3.9 2.5-.2-.6-.1-2.3-.9-2.5"/>
      <path class="st1" d="M127.3 145.9c-1.2 0-1 1.5-1.1 2.3.5-.2 2.2-2.3 1.1-2.3"/>
      <path class="st5" d="M110.3 148.2c.1.2.2.5 0 0"/>
      <path class="st1" d="M110.3 146.2c.1 1.9.2 2.4 2.2 2.6-.6-1.3-.8-2.1-2.2-2.6"/>
      <path class="st6" d="M111.6 146.5c.1.5.5 2.2 1.2 2.3-.3-.6-.4-2.1-1.2-2.3"/>
      <path class="st1" d="M128 137.6c-.1.3-.1.5-.2.8.1-.3.1-.6.2-.8m-.4 1.8c-.1.6-.2 1.2-.3 1.7.2 0 .3-1.5.3-1.7"/>
      <path class="st2" d="M127.8 138.3c-.1.4-.2.8-.2 1.2.1-.4.2-.8.2-1.2"/>
      <path class="st1" d="M126.9 143.7c-.3.1-.3 2.2-.4 2.4.3-.1.3-2.2.4-2.4m-.6 4.4c-.4.1-.3 3-.4 3.5.1-1.1.2-2.3.4-3.5m-12.1 16.5c-.3.5-.5.9-.8 1.4 0-.1.7-1.3.8-1.4"/>
      <path class="st2" d="M123.9 170.9c-.7 0-1.3.1-2 .1 5.6 0 11.2 1.2 16.8 1.3-4.9 0-9.8-1.4-14.8-1.4m2-19.3c-.1 1.7-.2 3.4-.2 5.1 0-1.7.1-3.4.2-5.1"/>
      <path class="st1" d="M113.4 165.9c-.5 1-.8 2-.8 3.1 0-.3.8-3.1.8-3.1"/>
      <path class="st1" d="M113.1 166.7c-.5 1-.7 2-.4 3.1-.1-1.1 0-2.1.4-3.1"/>
      <path class="st6" d="M112.7 169.3c.1.3.1.5.2.8-.1-.3-.2-.6-.2-.8"/>
      <path class="st1" d="M127.3 141.2c-.3.1-.4 2.2-.4 2.5.2-.1.3-2.3.4-2.5m-.8 4.9c-.2.1-.2 1.8-.3 2 .2 0 .3-1.8.3-2m-15.2-9.4c-.1.2-.2.5-.3.7 2-2.2.3-.2.3-.7"/>
      <path class="st1" d="M111.3 136.7c-.1.2-.2.5-.3.7 2-2.3.3-.2.3-.7"/>
      <path class="st1" d="M111.3 136.7c-.1.2-.2.5-.3.7.2-.2.3-.5.3-.7m14.7 24.8c.5 2.4 6.9 4.3 8.5 5 2.5 1 6.9 1.8 8.7 4-2.3-2.6-7.3-3.4-10.3-4.7-1.3-.6-6.6-2.3-6.9-4.3m2-24c-.4 0-.2.1 0 0"/>
      <path class="st1" d="M127.8 137.5c-.7.1-10.3.1-10.5.4 1.2.2 10.1 1.4 10.5-.4"/>
      <path class="st2" d="M121.9 171.1h-3c.2.8 2.5 0 3 0m3.8-14.4c0 1.6.1 3.2.3 4.8-.2-1.5-.3-3.2-.3-4.8"/>
      <path class="st6" d="M112.9 170.1c1 1.9 4.5 1.4 6.1 1.3-.6-1.6-5.1.4-6.1-1.3"/>
      <path class="st1" d="M111 137.5c-.1.3-.1.5-.2.8.1-.3.2-.6.2-.8m16.9.1c-.3.2-.4.4-.2.8.1-.3.2-.6.2-.8"/>
      <path class="st1" d="M111 137.5c-.6 1.9 16.2 3 16.7.1-5.5 1.1-11.1.4-16.7-.1m16.6 2c-.1.5-.2 1.1-.3 1.6.2 0 .2-1.4.3-1.6"/>
      <path class="st2" d="M127.5 138.2c-5.5 0-11.3 2.4-16.6.1-1.1 5.7 4.4 4.4 8.6 4.2 1.9-.1 4.9.2 6.5-.8.1-.2 2.8-3.5 1.5-3.5"/>
      <path class="st1" d="M126.9 143.7c-.3.1-.3 2.2-.4 2.4.3-.1.3-2.2.4-2.4"/>
      <path class="st2" d="M126.9 143.7c-5 1.6-10.4 1.4-15.6.6 1.1 4 5 2.9 8.8 2.7 3.6-.2 6.2.4 6.8-3.3"/>
      <path class="st1" d="M126.3 148.1c-.5.1-.3 3-.3 3.5 0-1.2.1-2.3.3-3.5"/>
      <path class="st1" d="M113.8 152.2l.3.9-.3-.9m12.4-4.1c-.4.1-.2 2.2-.2 2.5 0-.8.1-1.6.2-2.5m-.2 13.4c.3 3.7 14.5 7.4 17.3 9-2.1-2.6-7.4-3.4-10.3-4.7-1.4-.6-6.7-2.3-7-4.3"/>
      <path class="st1" d="M126 161.7c.2 2.4 9.3 6.3 11.2 7.1-.7-.7 5.3 1.3 5.9 1.7-2.1-2.3-6.2-2.9-8.9-4-1.4-.7-7.8-2.7-8.2-4.8m-11.7 2.8l-.9 1.5c.1 0 .9-1.4.9-1.5"/>
      <path class="st1" d="M114.2 164.7c-.4.4-.6.8-.6 1.3.2-.4.4-.9.6-1.3"/>
      <path class="st2" d="M126.2 148.2c-4.4 1.2-9 1.1-13.4.7 1.9 5.6 3.5 11.6.9 17.2 1.6.7 3.5 1.2 5.3 1.2-1.2 6 4.9 3.6 9.1 4.1 2.3.2 11.8 3.4 10.7-1-1-3.6-9.2-4.6-11.6-7.1-3.1-3.1-1.6-11.4-1-15.1"/>
      <path class="st1" d="M113.4 166c-.1.2-.2.5-.3.7.1-.3.2-.5.3-.7"/>
      <path class="st1" d="M113.4 166c-.6 1-.8 2.1-.8 3.3.1-.4 1-3.3.8-3.3"/>
      <path class="st6" d="M113.6 166c-2.3 4.9 1.3 5 5.3 5-.3-1.3-.3-2.6 0-3.9-1.8.1-3.7-.4-5.3-1.1"/>
      <path class="st1" d="M143.1 170.4c.2.5.4 1 .6 1.4.1-.5-.1-1-.6-1.4"/>
      <path class="st1" d="M137.8 168.2c-.3-.1-.6 0-.9.3.7 2.5 6.6.5 6.8 3.5 0-2.2-4.1-3.8-5.9-3.8"/>
      <path class="st6" d="M137.2 168.8c.9.9 2.3 2.1 1.6 3.6 1.2 0 5.7.9 4.6-1.2-.9-1.5-4.7-1.8-6.2-2.4"/>
      <path class="st1" d="M127.3 141.2c-.3.1-.4 2.2-.4 2.5.2-.1.3-2.3.4-2.5"/>
      <path class="st6" d="M127.2 141.2c-5.1 1.7-11.2 2.1-16.4.7.8 5 15.7 4.3 16.4-.7"/>
      <path class="st1" d="M126.5 146.1c-.3.1-.3 1.8-.3 2 .2 0 .3-1.8.3-2m-.3 1.5c-.1.7-.1.7 0 0"/>
      <path class="st6" d="M126.5 146.1c-4.6 1.4-9.8 1.4-14.5.5 1.3 4.1 13.8 3.8 14.5-.5"/>
      <path class="st1" d="M104.3 83.2c0 1.6 7.7 4 8.5 4.2 4.9 1.5 10.6 1.4 15.6.4.2 3.4-13.5 1.4-15.3 1.1-4.5-.8-8.2-.8-8.8-5.7"/>
      <path class="st3" d="M89.3 159.8c1.4.7 4.5 1.9 6 1.4 2.3-.8 1.9-1.8 1.9-4.3.1-6.8 4.3-12.3 5.3-18.9-2.6-.2-6.3-1.9-8.7-1.6-2.4.3-2.2 1-2.8 3.9-1.2 6.4-.7 13-1.7 19.5zm6 5.7c.3.2.7.4 1.1.4 2.3-3.1-3.5-4.6-5.4-4-2.8.8-4.7 3.9-.5 3.6-5.5 3.7-8.5 9.2.1 10.5 1.6.3 5.5.9 6.7-.9 1.3-2-1.6-7.5-2-9.6z"/>
      <path class="st1" d="M96.3 48.8c2.3 1.3 5.2 1.4 7.8 1.2 1.2-.1 4.5-1.3 5.4-.2-2.6 1.2-5.9 1.2-8.8.9-.9-.2-5.9-1.5-4.4-1.9zm30.6 1.7c1 .7 7.1 2.6 6.4 4.5.6-1.4-7.1-2.9-7.1-4.4.2-.1.4-.2.7-.1z"/>
      <path class="st3" d="M95.9 87.8c5.7-.4 12.5 4.5 5.7 8.9-5.3 3.4-11.2-4.6-5.7-8.9"/>
      <path class="st7" d="M71.4 69.3C60 73.2 49 78 38.5 83.9c3.9 2.5 5.6 7.1 6.7 11.4.5 2.2 0 8.6 1.7 10.3C49.8 97.7 55.5 91 61.3 85c2.1-2.2 8.2-6.2 9-8.8.9-2.8-1.1-4.4 1.1-6.9"/>
      <path class="st7" d="M40.5 82.7c-.7.4-1.4.7-2.1 1.1.4.2 1.9-.9 2.1-1.1m32.3-15.4c-7.6 3.1-14.9 6.8-22.2 10.4 4.4-2 8.8-4 13.3-5.6 3-1 7.3-1.6 8.9-4.8"/>
      <path class="st1" d="M75.3 66.3c-4.4 0-5.9 6.4-4.6 9.5 1.5-1.4 1.4-9.5 4.6-9.5"/>
      <path class="st8" d="M69.9 119.7c-.3 0-.7.1-1 .1 9.3-.3 17.3 4.1 21.8 12.3.8-1.3-4.9-6.7-5.5-7.3-4.2-3.7-9.7-5.1-15.3-5.1"/>
      <path class="st7" d="M97.1 102.5c-7.1 7.6-16.4 15.8-27.1 17.2 8.9 0 16.6 4.5 20.8 12.4 1.1-1.8 3.8-3.7 4.3-5.7s-.8-5.8-.9-7.9c-.2-5.4 1.2-10.9 2.9-16"/>
      <path class="st1" d="M98 101.5c-3.3 0-3.9 16.8-3.9 18.3.1 3.3 1.5 5.5-.4 8.2-2.3 3.4-3.4 3-1.6 7 3.3-6.6 4.1-14.1 4.1-21.4.1-.5.5-12.1 1.8-12.1m-67.4-10c6.9-5 14.9-8.7 22.5-12.6 2.1-1.1 20.8-7.9 20.1-10.6-.5-2.1-3.6.4-5 1.1-4 2-8.2 3.7-12.3 5.7-8.3 4-16.5 8.1-24.4 13m64.2-18.3c-2.5 3.1 3.6 5.1 5.3 7.6.9 1.4 1.6 10.3 2.4 10.3 2.6 0 .9-5.2.8-6.1-.2-1.4-.6-2.3.1-3.5.2-.4 2.8-1.6 2.6-2.2-4.9.6-8.5-2.7-11.2-6.1"/>
      <path class="st9" d="M106.8 75.7c-2.1 2.2-2.9 2-2.6 5.2.3 2.8 1.3 3.3 3.8 4.5.1-3.2.1-6.6-1.2-9.7m-.8-10.2c.1 0 0 0 0 0m-7.5-4.7c-1.1 1.7-.6 4-1.2 5.9-.8 2.3-1.7 2.2-.5 4.4 1.7 3.3 6.4 5.2 9.9 4.6-1-2.3-3.8-4.2-3.9-6.9-.1-1.7.9-4 3-3.4-2.6-.9-5.7-2.2-7.3-4.6"/>
      <path class="st1" d="M104 87.3h-1.2c.2.8.6 1.5 1.3 2 .3-.6.9-2-.1-2"/>
      <path class="st9" d="M104.7 86.2c-.5 3.7.2 2.7 1.9 5.9.3-.9 1.5-3 1.1-3.9-.6-1.7-2.1-.7-3-2"/>
      <path class="st1" d="M102.9 88.2c.1 1.8 2.4 3.3 3.4 4.6 1-1.3-2.6-4.2-3.4-4.6m-5-29.2c-.8 2.4-1 4.7-1.5 7.1-.4 1.7-1.7 3.3-1.8 4.9 2.9-2.8 4.4-8 3.3-12"/>
      <path class="st1" d="M97.9 59.1c0 3.6 5.3 5.5 8.1 6.4-2.7-2.1-5.4-4.3-8.1-6.4m6.4 24.1c.3 2.6.7 3.4 3.3 4.2.5-3.3-2.7-1.8-3.3-4.2m10.8 36.7c-1.5 3.4 1.1 5.5 1 9-.1 3.3-2.7 5.4-4.6 7.9 1.9.6 1.1-1 2.2-1.9.8-.6 3.5-2 3.9-2.5 2.1-2.6-1.3-9.2-2.5-12.5"/>
      <path class="st9" d="M118.5 105.5c-.2 0-3.4 13.8-3.4 14.4 0 3.6 3.9 6.6 3.2 10.6-.4 2.5-.1 1.2-2.5 2.4-1.6.8-2.6 2.6-3.1 4.2 3 .8 4 1.1 5.9-1.2 1.5-1.8 2.4-4.6 2.5-6.9 0-7.8-2.5-15.7-2.6-23.5m0-1.7c-.1.5-.2 1.1-.3 1.6.4-.4.5-.9.3-1.6"/>
      <path class="st1" d="M118.5 103.8c-1.4 4.8-5.8 13-4.3 17.9 2.7-5 4.2-12.2 4.3-17.9m-5.5 33.3c.6.1 3.9 1.4 4.4.5-1.5 0-3-.2-4.4-.5m-1.9.3c-.2.1-.1.1 0 0m.5-.7l1.2.3c-.5-.1-.9-.2-1.2-.3"/>
      <path class="st9" d="M112.7 137c0 .1.8.3 0 0"/>
      <path class="st1" d="M112.6 137c.6.2 4.4 1.5 4.7.9-1.6-.2-3.2-.5-4.7-.9m-1.5.4c-.1.2 0 0 0 0m.5-.7s.9.3 1 .3c-.4-.1-.7-.2-1-.3"/>
      <path class="st1" d="M111.5 136.7c-.2.2-.4.5-.5.7.7.1 5.7 1.3 6.2.5-1.9-.2-3.8-.5-5.7-1.2m10.1-95.6c-.9.9-.4 2.2-.4 3.3.6-.9.5-2.3.4-3.3"/>
      <path class="st9" d="M106.7 41.3c2.4 5 14.9 8.3 14.3.4-4.3 4-10.3 3.6-14.3-.4"/>
      <path class="st1" d="M121.5 40.2c-2.6 2.8-4.4 3.9-8 3.6-1.3-.1-2.8-.1-3.9-.7s-1.3-2.4-2.9-2.2c1.8 4.2 15.9 5.2 14.8-.7"/>
      <path class="st1" d="M107.4 40.9c.6.5 1.2.9 1.8 1.4-.3-.9-.7-1.7-1.8-1.4m14.1-.7c-.9.7-1.7 1.4-2.6 2.1.9-.7 1.8-1.4 2.6-2.1"/>
      <path class="st9" d="M108.6 41c.1.2.2.4.3.7-.1-.3-.2-.5-.3-.7"/>
      <path class="st2" d="M107.1 47.1c3 2 7.9 4 11.5 3 1.9-.5 8.3-5.1 9.7-.9.9 2.5-.9 1-2.1 1.1-2.3.1-4.1.4-6.4.8-4.7.8-8.8-1.5-13.5-1.3"/>
      <path class="st1" d="M106.7 47.7c1.1.7 10.3 4.6 10.2 2.6-1.1 2.3 5.1-1.2 5.6-1.4 1.3-.4 6.1 1 6.3.6-.4.4-.8.2-.6.6.6-.6-.1-.4 0-.4.7 0-.3-.1-.2-.1.1 0 .2.1.3.1-.6.1-.8.4-.6.9.4.4.7.4 1-.2-2.7-2.6-6.7-.4-9.6 0-4.4.6-8.3-1.7-12.7-1.5.1 2.5 7.5 3 9.7 3.2.8.1 8.9-.4 8.3-2.1-.1 1 3.3 2.1 3.6 1.4-.1.1-.1.2-.1.3 0 0 .5-.9-.1-.3.1.5.2.4.4-.3-.9.9 2.1-.1.9-2.4-1.2-2.3-7.4-1.7-6.5-.5-.3-1.7-2.9 1-3.8 1.2-1.8.5-3.2-.1-4.9-.5-2.3-.8-5.8-3.4-7.2-1.2z"/>
      <path class="st2" d="M106.3 47.4c4.4 1.9 9.6 3.7 14.1 1.9 2.4-.9 3.6-2.1 6.3-1 .7.3 3.4 1.9 3.1 2.9 0 .1-7.5-.8-8.3-.7-5.5.9-10-1.2-15.3-.9"/>
      <path class="st1" d="M92.4 131.3c-1.2-1.2-2.9-1.9-4.1-3.1-1.1-1-1.9-2.3-3-3.3-2.8-2.5-6.2-4-9.8-4.6-7.5-1.4-15.9.7-22.4-4.2-5.8-4.4-6.2-11.4-7.3-18-.6-3.1-1.3-6.5-2.9-9.3-1.5-2.7-2.1-3.8-4.8-2.1 5.3 4.6 5.1 11.9 6.4 18.3 1.3 6.5 5 11.7 11.1 14.6 7.3 3.4 15.5 1.2 22.9 3.9 3.3 1.2 5.6 3.4 8 6 1.6 1.7 4.3 5.4 5.9 1.8zm39.9-54c-1.4 3.1 3.2 2.3 4.7 2.1 0-.1-4.5-1.9-4.7-2.1"/>
      <path class="st9" d="M137 79.3c-.3.1-.6.1-.8.2.3-.1.5-.1.8-.2m-2.9-5.7c-2.1 3.9-1.4 4.8 2.9 5.7-.7-2.1-2.4-3.3-2.9-5.7"/>
      <path class="st1" d="M134.1 73.5c-1 1.3-3.5 3.3-2.3 5.1.5-1.4 2.6-3.5 2.3-5.1"/>
      <path class="st10" d="M258.8 84h-34.6V71.9c0-7.6-.3-12.4-1-14.3-1.3-3.7-7.4-3.9-9.1-.4-.8 1.6-1.2 5.9-1.2 12.7v63.9c0 6 .4 9.9 1.2 11.8 1.7 4.2 8.1 3.5 9.8-.4.9-2.1 1.4-6.3 1.4-12.5v-15.8h-7V96.6h40.6v71.5H237l-3.2-9.5c-2.4 4.1-5.3 7.2-8.9 9.3-8.8 5-20.5 3.6-29.1-1.2-5.1-2.8-8.9-6.3-11.6-10.5-2.6-4.2-4.3-8.5-4.9-13.1-.7-4.6-1-11.5-1-20.6V82.9c0-12.7.7-22 2.1-27.7 1.4-5.8 5.3-11 11.8-15.8 7.1-5.3 16-7.1 24.7-7.2 8.9-.1 18.1 1.5 25.8 6.3 6.7 4.2 11.1 9.1 13.1 14.9 2 5.7 3 14.1 3 25V84zm83.3-8.8h-32.2v-9.9c0-4.6-.4-7.5-1.2-8.8-2-3.1-7.1-2.2-8.8.7-2.8 4.5-2.3 13.2.2 17.8 1.1 2.3 4.4 5 9.8 8.1 15.4 9.2 25.1 16.7 29.1 22.5 4.5 6.7 5.5 15.4 5.9 23.3.4 8.4.6 18.3-3.2 26.1-2.2 4.5-6.5 8.3-12.9 11.3-13.7 6.6-32.5 6.5-46-.7-6.6-3.5-10.8-8-12.9-13.4-2-5.4-3-13.1-3-23.1v-8.7H299v16.2c0 5 .5 8.2 1.4 9.6 2.2 3.4 8 2.6 10-.6 2.3-3.8 1.8-9.2 1.5-13.4-.3-3.3-.7-7.4-3-10-2.2-2.4-7.6-6.4-16.2-12.1-8.6-5.7-14.3-9.8-17.1-12.4-2.8-2.6-5.1-6.1-7-10.7-2.8-6.9-3-14.7-2.7-22 .3-6 .9-12.5 3.8-17.8 2.6-4.7 6.8-8.4 12.6-11.1 13.1-6 31.1-5.6 44.1.4 6.3 2.9 10.5 6.6 12.6 11 2.1 4.4 3.1 11.9 3.1 22.5v5.2zm74.1-43.1L436 165.4h-35.4l-1.9-23.9h-12.4l-2.1 23.9h-35.8l17.7-133.2h50.1zm-18.4 85.7c-1.8-15.1-3.5-33.7-5.3-56-3.5 25.5-5.7 44.2-6.6 56h11.9zm43.9-85.7h34.9c9.4 0 16.7.7 21.8 2.2 5.1 1.5 8.9 3.6 11.4 6.4 2.6 2.8 4.3 6.2 5.2 10.2.9 4 1.4 10.1 1.4 18.5V81c0 8.5-.9 14.7-2.6 18.6-1.8 3.9-5 6.9-9.7 9-4.7 2.1-10.8 3.1-18.4 3.1h-9.3v53.7h-34.6V32.1zm34.7 22.8v33.9c3 .2 7.1.4 9.2-2.3 1.2-1.6 1.9-4.8 1.9-9.8V65.9c0-4.6-.7-7.5-2.1-8.9-1.5-1.4-4.5-2.1-9-2.1z"/>
    </g>    
  </svg>
</main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?v=1'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/osublake/bendy-svg-MQQLKX */
body {
  background: #fafafa;
}

main {
  visibility: hidden;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#svg {
  width: 60%;
  height: 60%;
  max-width: 800px;
  max-heigt: 800px;
  overflow: visible;
}

.st0 {
  fill: #FFFFFF;
  stroke: #000000;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
}

.st1 {
  fill: #010101;
}

.st2 {
  fill: #8AC640;
}

.st3 {
  fill: #F0EFEF;
}

.st4 {
  fill: #0A1825;
}

.st5 {
  fill: #B2B2B2;
}

.st6 {
  fill: #618B2D;
}

.st7 {
  fill: #537727;
}

.st8 {
  fill: #999999;
}

.st9 {
  fill: #909090;
}

.st10 {
  fill: #8AC640;
  stroke: #000000;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}


/*Downloaded from https://www.codeseek.co/osublake/bendy-svg-MQQLKX */
console.clear();

function demo() {
  
  MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");
  const svg = document.querySelector("#svg");
  const paths = Array.from(document.querySelectorAll("path")); 
  
  const { width, height } = svg.getBBox();
  
  const grid = new Grid(width, height, paths);
      
  const targets = [
    grid.tl, grid.cpT0, grid.cpT1,
    grid.tr, grid.cpR0, grid.cpR1,
    grid.br, grid.cpB1, grid.cpB0,
    grid.bl, grid.cpL1, grid.cpL0
  ];
    
  const shapeData = targets.map(target => ({ target, x: target.x, y: target.y }));
  
  const duration = 1.5;
  
  TweenLite.defaultEase = Elastic.easeOut.config(1, 0.3);
  
  const twist1 = getTwist(0, 0, width, height, 3.3);
  const twist2 = getTwist(0, 0, width, height, -3.3);
  
  const tl = new TimelineMax({ 
    repeat: -1,
    onUpdate: grid.update,
    callbackScope: grid
  });
  
  tl.add("twist1+=1.5");
    
  targets.forEach((target, i) => {
    const ii = i * 2;
    tl.to(target, duration, { x: twist1[ii], y: twist1[ii+1] }, "twist1");
  });
  
  tl.add("twist2+=1.5");
    
  targets.forEach((target, i) => {
    const ii = i * 2;
    tl.to(target, duration, { x: twist2[ii], y: twist2[ii+1] }, "twist2");
  });
  
  tl.add("normalShape+=1.5");
    
  shapeData.forEach(shape => {
    tl.to(shape.target, duration, { x: shape.x, y: shape.y }, "normalShape");
  });
  
  TweenLite.set("main", { autoAlpha: 1 });
}

//
// POINT
// ===========================================================================
class Point {
  
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }

  static fromBezier(bezier, t, point) {
    
    const a = bezier[0];
    const b = bezier[1];
    const c = bezier[2];
    const d = bezier[3];
            
    const ab = _p1.copy(a).lerp(b, t);
    const bc = _p2.copy(b).lerp(c, t);
    const cd = _p3.copy(c).lerp(d, t);

    ab.lerp(bc, t);
    bc.lerp(cd, t);    
    ab.lerp(bc, t);
    
    return point ? point.copy(ab) : ab.clone();
  }

  static lerp(point1, point2, t, point) {
    const x = point1.x + (point2.x - point1.x) * t;
    const y = point1.y + (point2.y - point1.y) * t;
    return point ? point.set(x, y) : new Point(x, y);
  }
  
  lerp(point, t) {      
    this.x += (point.x - this.x) * t;
    this.y += (point.y - this.y) * t;
    return this;
  }
  
  clone() {
    return new Point(this.x, this.y);
  }
  
  copy(point) {
    return this.set(point.x, point.y);
  }
  
  set(x, y) {      
    this.x = x || 0;
    this.y = y || ((y !== 0) ? x : 0);
    return this;
  }
  
  round(place = 0, base = 10) {
    var p = Math.pow(base, place);
    this.x = Math.round(this.x * p) / p;
    this.y = Math.round(this.y * p) / p;
    return this;
  }
}

//
// GRID
// ===========================================================================
class Grid {
  
  constructor(width, height, pathElements) {
    
    this.pathTargets = [];
    
    for (let i = 1; i < 6; i++) { 
      this[`_p${i}`] = new Point(); 
    }
    
    pathElements.forEach(element => {
      
      const beziers = [];
      const rawBeziers = MorphSVGPlugin.pathDataToRawBezier(element);      
      
      rawBeziers.forEach(bezier => {
        
        const quantity = element.getAttribute("data-subdivide") * 1;
        
        if (quantity) {
          MorphSVGPlugin.subdivideRawBezier(bezier, quantity);
        }
                
        const pointList = [];
        beziers.push(pointList);
        
        for (let i = 0; i < bezier.length; i += 2) {
          
          const x = bezier[i];
          const y = bezier[i+1];
          
          const p = new Point(x, y);
          p._x = x / width;
          p._y = y / height;          
          pointList.push(p);
        }        
      });
      
      this.pathTargets.push({ element, beziers });      
    });
        
    // Corner/anchor points
    this.tl = new Point(0, 0);
    this.tr = new Point(width, 0);
    this.br = new Point(width, height);
    this.bl = new Point(0, height);
    
    // Control points
    this.cpL0 = new Point(0, height * 1 / 3);
    this.cpL1 = new Point(0, height * 2 / 3);
    this.cpR0 = new Point(width, height * 1 / 3);
    this.cpR1 = new Point(width, height * 2 / 3);
    this.cpT0 = new Point(width * 1 / 3, 0);
    this.cpT1 = new Point(width * 2 / 3, 0);
    this.cpB0 = new Point(width * 1 / 3, height);
    this.cpB1 = new Point(width * 2 / 3, height);
    
    this.bezierT = [this.tl, this.cpT0, this.cpT1, this.tr];
    this.bezierB = [this.bl, this.cpB0, this.cpB1, this.br];
    this.bezierL = [this.tl, this.cpL0, this.cpL1, this.bl];
    this.bezierR = [this.tr, this.cpR0, this.cpR1, this.br];
  }

  update() {
        
    // Reuse points to limit GC
    const p1 = this._p1;
    const p2 = this._p2;
    const p3 = this._p3;
    const p4 = this._p4;
    const p5 = this._p5;
    
    for (let path of this.pathTargets) {      
      let d = "";      
      for (let bezier of path.beziers) {        
        for (let i = 0; i < bezier.length; i++) {   
          
          const p = bezier[i];
          const x = p._x;
          const y = p._y;
          
          const yl = Point.fromBezier(this.bezierL, y, p1);
          const yr = Point.fromBezier(this.bezierR, y, p2);

          const cp0 = Point.lerp(this.cpT0, this.cpB0, y, p3);
          const cp1 = Point.lerp(this.cpT1, this.cpB1, y, p4);

          const k = Point.fromBezier([yl, cp0, cp1, yr], x, p5); 

          p.copy(k).round(2); 
          
          d += (!i ? `M${p.x} ${p.y} C` : ` ${p.x} ${p.y}`);
        }
      }      
      path.element.setAttribute("d", d);
    }
  }
}

//
// GET TWIST
// ===========================================================================
function getTwist(x, y, w, h, strength = 1) {
  
  var _tl = {},
    _tr = {},
    _sin,
    _cos,
    _rotateDif = function(p, x, y) {
      p.x = x * _cos - y * _sin - x;
      p.y = y * _cos + x * _sin - y;
    },
    r = x + w,
    b = y + h,
    bow = strength * Math.max(h, w) * 0.1,
    top = -bow,
    right = bow,
    bottom = bow,
    left = -bow,
    topCornerPull = 0,
    cpx,
    cpy;

  cpx = w / 4;
  cpy = h / 4;
  _cos = Math.PI * 0.05 * strength;
  _sin = Math.sin(_cos);
  _cos = Math.cos(_cos);
  _rotateDif(_tl, -w / 2, -h / 2);
  _rotateDif(_tr, w / 2, -h / 2);

  return [
    x + _tl.x, y + _tl.y,
    x + cpx - _tl.x, y - _tl.y,
    r - cpx - _tr.x, y - _tr.y,
    r + _tr.x, y + _tr.y,
    r + _tr.x, y + cpy + _tr.y,
    r - _tl.x, b - cpy - _tl.y,
    r - _tl.x, b - _tl.y,
    r - cpx + _tl.x, b + _tl.y,
    x + cpx + _tr.x, b + _tr.y,
    x - _tr.x, b - _tr.y,
    x - _tr.x, b - cpy - _tr.y,
    x + _tl.x, y + cpy + _tl.y,
    x + _tl.x, y + _tl.y
  ];
}

// Reuse points in Point.fromBezier method
const _p1 = new Point();
const _p2 = new Point();
const _p3 = new Point();

demo();

Comments