Origami Bird

index.html

<svg id="origami" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 731 673">
  <title>
    origami
  </title>
  <defs>
    <linearGradient id="linearGradient-1" x1="67.2876%" x2="93.0258%" y1="3.2188%" y2="51.425%">
      <stop stop-color="#038AA6" offset="0%"/>
      <stop stop-color="#43A3C6" offset="100%"/>
    </linearGradient>
    <linearGradient id="linearGradient-2" x1="67.2876%" x2="93.0258%" y1="3.2188%" y2="51.425%">
      <stop stop-color="#006D84" offset="0%"/>
      <stop stop-color="#3080AF" offset="100%"/>
    </linearGradient>
    <linearGradient id="linearGradient-3" x1="74.71%" x2="41.6359%" y1="14.4313%" y2="52.9505%">
      <stop stop-color="#30AED1" offset="0%"/>
      <stop stop-color="#1F8BCA" offset="100%"/>
    </linearGradient>
    <linearGradient id="linearGradient-4" x1="66.2204%" x2="7.7568%" y1="-4.4902%" y2="89.4876%">
      <stop stop-color="#3CD5FF" offset="0%"/>
      <stop stop-color="#20A3EE" offset="100%"/>
    </linearGradient>
    <linearGradient id="linearGradient-5" x1="27.5149%" x2="75.0214%" y1="34.8658%" y2="59.7922%">
      <stop stop-color="#3991C8" offset="0%"/>
      <stop stop-color="#43ABDB" offset="100%"/>
    </linearGradient>
    <linearGradient id="linearGradient-6" x1="66.2204%" x2="7.7568%" y1="-4.4902%" y2="89.4876%">
      <stop stop-color="#58D5F7" offset="0%"/>
      <stop stop-color="#44A7E0" offset="100%"/>
    </linearGradient>
    <linearGradient id="linearGradient-7" x1="27.5149%" x2="70.8088%" y1="34.8658%" y2="50%">
      <stop stop-color="#3991C8" offset="0%"/>
      <stop stop-color="#47B6E9" offset="100%"/>
    </linearGradient>
    <linearGradient id="linearGradient-8" x1="57.1597%" x2="91.2515%" y1="34.8391%" y2="64.3407%">
      <stop stop-color="#1087CA" offset="0%"/>
      <stop stop-color="#33A5E8" offset="100%"/>
    </linearGradient>
    <linearGradient id="linearGradient-9" x1="66.2204%" x2="7.7568%" y1="-4.4902%" y2="89.4876%">
      <stop stop-color="#37C4EB" offset="0%"/>
      <stop stop-color="#2392D2" offset="100%"/>
    </linearGradient>
    <filter id="filter-11" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feGaussianBlur stdDeviation="7" in="SourceGraphic" result="blur" />
    </filter>
  </defs>
  <g id="crane" fill="none" fill-rule="evenodd">
    <path id="backWing" fill="url(#linearGradient-1)" d="M415.7464 298l134.0834 96.941-383.6332 79.361L415.7464 298z" d2="M376.2598 204.13l133.8244 196.98L191.5 364.3777 376.2598 204.13z"/>
    <path id="backLeg" fill="url(#linearGradient-2)" d="M422.9083 580.9205L260.168 387.1457 615.0856 360 422.9083 580.9205z" d2="M397.5244 501.1314L206.5 307.3564l410.4962-38.2325-219.4718 232.007z"/>
    <path id="shadow-neck" fill="url(#linearGradient-3)" d="M317.701 144.3088l-79.4173-52.4023-92.1303 12.4487 158.097 153.2317 13.4506-113.2785z" d2="M206.8068 50.3704L133.1638.719 65.219 32.9714 208.753 146.242l-1.9462-95.8716z"/>
    <path id="head" fill="url(#linearGradient-4)" d="M238.29 91.8772l-91.9494 12.195-31.2136 101.1313L238.29 91.8772z" d2="M133.2034.698L41.2542 12.893.4527 103.8865 133.2034.698z"/>
    <path id="frontLeg" fill="url(#linearGradient-6)" d="M368.4237 592.757L190.5232 385.813l423.9103-26.3822-246.0098 233.326z" d2="M345.4004 513.5058L167.5 306.5618l449.6116-37.4072-271.7112 244.3512z"/>
    <path id="shadow-frontWing" fill="url(#linearGradient-5)" d="M322.796 377.5706l-86.1322 61.9428 19.3996 22.4947 255.8874-5.323 41.4394-39.3526-74.8754-49.4368-155.7187 9.675z" d2="M271.897 297.8037l-54.8477 66.3914 40.8226 47.492 167.337 30.431 44.08-39.9594-59.5434-115.703-137.849 11.3488z"/>
    <path id="frontWing" fill="url(#linearGradient-4)" d="M249.9697 368.6258L415.7464 298l113.6014 126.54-340.1598 46.558 60.7817-102.4724z" d2="M151.025 307.3592L376.26 204.13l94.6332 232.4433-348.9394-40.9085 29.0715-88.3056z"/>
    <path id="shadow-antNeck" fill="url(#linearGradient-8)" d="M194.323 392.2383l56.814-24.1283-51.671 101.583-33.4173 4.63 28.2744-82.0847z" d2="M146.382 309.521l10.3152-4.748-16.3142 93.0446-28.0344-3.1218 34.0333-85.175z"/>
    <path id="antNeck" fill="url(#linearGradient-4)" d="M391.1433 193.312L305.1797 136 141.168 338.5324 166.0324 474.37l225.111-281.058z" d2="M263.5794 87.9936L194.943 42.142 87.5 258.8168l24.864 135.8377 151.2155-306.661z"/>
    <path id="neck" fill="url(#linearGradient-9)" d="M198.6447 155.2564L238.28 91.8698l66.891 44.137-66.9828 57.5394-39.5435-38.2898z" d2="M88.388 51.273L133.174.7257l61.8133 41.465-44.9527 57.8184L88.388 51.273z"/>
  </g>
  <ellipse id="shadow-ground" cx="377.6681" cy="653" filter="url(#filter-11)" fill="#E0E0E0" fill-opacity=".8" rx="237.5" ry="10" />
</svg>

Origami Bird.markdown

Origami Bird

Forked from Bruno Azevedo's Pen Origami Bird.

A Pen by Yuval Saraf on CodePen.

License.

script.js

let durationUp = 1;

function animateFlight() {
  let origamiParts = Snap.selectAll('#crane > path');

  origamiParts.forEach(function(el, i) {
    let pathAnimation = el.animate(
      { d: el.attr('d2') }, durationUp
    );

    /* Get the animation controller */
    let pathAnimationCtrl = pathAnimation.anims[Object.keys(pathAnimation.anims)[0]];

    /* Pause the animation right away */
    pathAnimationCtrl.pause(); 

    let tweenerObj = { progress: 0 };

    TweenMax.to(tweenerObj, durationUp, {
      progress: 1,
      ease: Sine.easeInOut,
      onUpdate: function() {
        pathAnimationCtrl.status(tweenerObj.progress);
        pathAnimationCtrl.update();
      },
      yoyo: true,
      repeat: -1
    });
  });
}

function animateShadow() {
  let shadowGround = document.querySelector('#shadow-ground');
  
  TweenMax.to(shadowGround, durationUp, {
    attr: { cx: "365.5", rx: "172.5" },
    fill: '#DFDFDF',
    fillOpacity: "0.4",
    ease: Sine.easeInOut,
    yoyo: true,
    repeat: -1
  });
}

animateFlight();
animateShadow();

setTimeout(function(){var ele = document.getElementById('origami');ele.style.transformStyle =  'preserve-3d';document.getElementsByTagName('body')[0].addEventListener('mousemove', function(e){console.log('Yuval');var width = ele.clientWidth / 2; var height = ele.clientHeight / 2;ele.style.transform = 'rotateY(' + (((e.clientX - width) / width) * 180) + 'deg) rotateX(' + (((e.clientY - height) / height) * 180) + 'deg)';});}, 1000);

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/AttrPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

style.css

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

svg {
  max-width: 731;
  max-height: 673px;
}