FLYİNG PİG

HTML 
▪
▪

<div class="pig-container">

<svg class="pig" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 226.3 246.7">

  <style>

    .st1{fill:#efbddc}.st2{fill:#fccae7}

  </style>

  <g id="pig">

    <path id="back-wing" fill="#efefef" d="M101.6 77.3s20.8-52.7 39.4-62.2c18.6-9.5 12.8 21.6 9.2 28 9.1-1.9 7.6 9.7 2.9 15.5 3.5 3.1-3 15.5-14.2 20.7 2.6 5.3-2.2 9.5-5.8 12.4-10.6 23.2-42.9 28.2-31.5-14.4z"/>

    <g id="back-right-hoof">

      <path d="M126.9 144.8c-12.5 8.7 4.2 63.7 5.1 67.5 1.3 5.2 26 5.1 25.5.1-.7-6.8 14-55.3 14-55.3" class="st1"/>

      <path d="M158.4 211.4l-27.9-1.6s.7 12.2 2.3 13.3c4.3 3 10.7-4.1 12.1-3.2 1.5.9 3.9 5.3 9.1 6.1 4.1.5 4.4-14.6 4.4-14.6z"/>

    </g>

    <g id="front-right-hoof">

      <path d="M83.9 170.3s.9 28.5 0 32c-1.3 4.8-25.9 4.7-25.5.1.7-6.2.6-31.9.6-31.9" class="st1"/>

      <path d="M57.6 201.5l27.6-1.8s-.5 11.4-2.1 12.4c-4.3 2.7-10.7-3.7-12.1-3-1.5.8-3.9 4.9-9.1 5.6-4 .6-4.3-13.2-4.3-13.2z"/>

    </g>

    <path id="body" d="M55.1 85.4c-23.4 10-45.7 33.1-30.5 72.7 13.9 36.3 175.7 90.2 185-13 7.8-87.1-88.4-55.6-93.1-55.6-12-.1-38.4-13.9-61.4-4.1z" class="st2"/>

    <path id="front-wing" fill="#fff" d="M126.7 82.9s44.7-49.1 65.5-51.2c20.7-2.1 3.6 24.9-2.1 29.5 9.1 1.5 3.3 11.9-3.2 15.5 2 4.1-8.6 13.4-20.9 14.2.4 6-5.4 9.3-9.8 10.6-34.2 6.3-56.1 17.2-29.5-18.6z"/>

    <path id="tail" d="M189.8 100.7s.3.2.9.5c.3.2.6.3.9.4.3.2.8.3 1.3.5 1 .4 2.3.7 3.8.9 1.5.2 3.2.2 5 0 1.8-.3 3.8-.9 5.5-1.9 1.7-1.1 3.2-2.6 3.7-4.6.3-1 .3-2.1.1-3.2 0-.3-.1-.6-.2-.8-.1-.3-.1-.6-.3-.8l-.2-.4v-.2c.1.2 0 0 0 .1l-.1-.2-.2-.5-.1-.2-.1-.1c-.1-.2-.2-.4-.4-.6l-.2-.3c-.1-.1-.2-.1-.3-.2-.4-.2-.7-.4-1.1-.4-.9 0-1.9.5-2.7 1.3-.8.8-1.3 1.9-1.4 2.9 0 .5.1.9.3 1.3.3.4.6.7 1.1 1 1 .5 2.2.7 3.5.8h1.9c.6 0 1.3-.1 1.9-.2 2.5-.3 5-.7 7-1.7 2.1-.9 3.5-2.7 3.7-4.6.2-2-.5-3.8-1.2-5.3s-1.6-2.7-2.3-3.7c-1.4-1.9-2.4-2.9-2.4-2.9s1 .9 2.6 2.8c.8.9 1.7 2.1 2.5 3.6s1.7 3.3 1.6 5.5c0 1.1-.4 2.3-1.1 3.2-.7 1-1.7 1.8-2.8 2.4-2.2 1.2-4.7 1.8-7.3 2.3-.7.1-1.3.2-2 .3-.7.1-1.4.1-2.1.1-1.4 0-2.9-.1-4.4-.8-.7-.3-1.4-.9-2-1.6-.5-.7-.8-1.7-.8-2.5 0-1.8.7-3.3 1.8-4.6 1.1-1.2 2.5-2.3 4.5-2.4 1-.1 2 .2 2.7.7l.6.4c.2.1.3.3.5.5.3.3.6.7.9 1l.2.3.1.2.2.4.1.2.1.1v.1l.1.1.2.5c.2.3.3.7.4 1.1.1.4.2.7.3 1.1.4 1.5.4 3.1.1 4.6-.3 1.5-1 3-1.8 4.2-.9 1.2-1.9 2.2-3 3-2.2 1.5-4.6 2.4-6.9 2.9-4.5.9-8.4.3-11-.4-.7-.2-1.2-.4-1.7-.6-.5-.2-1-.4-1.3-.5-.6-.3-.9-.4-.9-.4l2.2-4.7z" class="st2"/>

    <g id="front-left-hoof">

      <path d="M100.8 180.9s.9 28.5 0 31.9c-1.3 4.8-25.9 4.7-25.5.1.7-6.2.6-31.8.6-31.8" class="st2"/>

      <path d="M74.5 212l27.6-1.8s-.5 11.4-2.1 12.4c-4.3 2.7-10.7-3.7-12.1-2.9-1.5.8-3.9 4.9-9.1 5.6-4 .5-4.3-13.3-4.3-13.3z"/>

    </g>

    <g id="front-right-hoof_1_">

      <path d="M159.1 147.5c-13.1 8.7 4.4 63.7 5.4 67.5 1.4 5.2 27.3 5.1 26.8.1-.7-6.8 14.7-55.3 14.7-55.3" class="st2"/>

      <path d="M192.2 214.1l-29.3-1.6s.7 12.2 2.4 13.3c4.5 3 11.2-4.1 12.8-3.2 1.5.9 4.1 5.3 9.6 6.1 4.2.5 4.5-14.6 4.5-14.6z"/>

    </g>

    <g id="snout">

      <path d="M28 122.1s-13.9 1.8-16.3-1.5c-2.4-3.3-5.8 15.5-2.7 20.5 3.7 5.9 9.6 6.9 19.7 3.8 10.2-3-.7-22.8-.7-22.8z" class="st2"/>

      <defs>

        <path id="SVGID_1_" d="M28 122.1s-13.9 1.8-16.3-1.5c-2.4-3.3-5.8 15.5-2.7 20.5 3.7 5.9 9.6 6.9 19.7 3.8 10.2-3-.7-22.8-.7-22.8z"/>

      </defs>

      <clipPath id="SVGID_2_">

        <use overflow="visible" xlink:href="#SVGID_1_"/>

      </clipPath>

      <path fill="#eab9d9" d="M11.4 119.1s8.7 30.9-2 28.9c-10.6-2-2.9-29.1 2-28.9z" clip-path="url(#SVGID_2_)"/>

      <path fill="#bc7ead" d="M9.5 134.4c0 2.3.5 4.2 1.2 4.2s1.2-1.9 1.2-4.2c0-2.3-.5-4.2-1.2-4.2s-1.2 1.9-1.2 4.2z"/>

    </g>

    <g id="ear">

      <path d="M71.4 94.7s29.1-17.6 44-9.2c13 7.3 14 20.5 17.1 24.4 1.9 2.4-16 1.2-19.2 3.4-10.9 7.7-13.9 2.6-24.1 3.4" class="st2"/>

      <path fill="#e2afd1" d="M81.9 98.4s25-12 32.2-7.5c9.3 5.8 13.3 13.1 13.9 16.7.3 1.8-15.2 1.5-17.1 3.6-8.7 9.8-37.9-6.7-29-12.8z"/>

    </g>

    <path id="eye" d="M57.4 120.3c0 3.5-2.7 6.3-6.1 6.3-3.4 0-6.1-2.8-6.1-6.3s2.7-6.3 6.1-6.3c3.3 0 6.1 2.8 6.1 6.3z"/>

  </g>

</svg>

</div>  

▪

▪

▪CSS

▪

▪

body {

  position: relative;

  background-color: #88a5c8;

  height: 100vh;

}

.pig {

  width: 300px;

  height: 300px;

  animation-name:flying;

  animation-duration:10s;

  animation-timing-function:linear;

  animation-iteration-count:infinite;

}

.pig-container {

  position: absolute;

  width: 300px;

  height: 300px;

  top: 20%; 

  right: 0;

  animation-name:floating;

  animation-duration:1s;

  animation-timing-function:ease-in-out;

  animation-iteration-count:infinite;

  animation-direction:alternate;

}

@keyframes flying{

  0%{

    transform: translateX(60vw);

  }

  100%{

    transform: translateX(-110vw);

  }

}

@keyframes floating{

  to{

    transform: translateY(50px);

  }

  from{

    transform: translateY(-50px);

  }

}

#front-wing, #back-wing {

  animation-name:flap;

  animation-duration:0.1s;

  animation-iteration-count:infinite;

  animation-direction:alternate;

  transform-box:fill-box;

  transform-origin:bottom left;

}

@keyframes flap{

  to{

    transform:rotate(-10deg)

  }

  from{

    transform:rotate(60deg)

  }

}

#back-wing {

  animation-delay:0.02s;

}