Paper Plane SVG

index.html

<svg width="75.677mm" height="64.383mm" version="1.1" viewBox="0 0 75.677 64.383" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <metadata>
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
    <dc:title/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <g transform="translate(-40.833 -119.08)">
  <g>
   <path d="m65.351 180.85 11.378-12.435-12.7-8.7312-3.9687 7.1438z" fill="#3f3f3f"/>
   <path d="m40.944 153.04 75.565-33.959-23.257 64.383z" fill="#ccc" stroke-width=".24175"/>
   <path d="m40.833 153.15 31.712 1.6502 20.708 28.663z" fill="#b5b5b5" stroke-width=".11202"/>
   <path transform="scale(.26458)" d="m440.35 450.07-230.84 159.96 37.488 73.484v-50.996z" fill="#6a6a6a" stroke-width=".40016"/>
  </g>
 </g>
</svg>

paper-plane-svg.markdown

Paper Plane SVG

A paper plane using SVG

A Pen by Conner on CodePen.

License.

style.css

body {
  background: #202B33;
}
svg {
  max-height: 300px;
  max-width: 300px;
  height: auto !important; /* overrides inline */
  width: auto !important; /* overrides inline */
  margin: 0 auto;
  display: block;
  position: relative;
  top: 150px;
  animation: flipInX 2s;
}

      .flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes flipInX {
  0% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  opacity: 0;
  }
  40% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  }
  60% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  opacity: 1;
  }
  80% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
  -webkit-transform: perspective(400px);
  transform: perspective(400px);
  }
  }
  @keyframes flipInX {
  0% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  opacity: 0;
  }
  40% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  }
  60% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  opacity: 1;
  }
  80% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
  -webkit-transform: perspective(400px);
  transform: perspective(400px);
  }
  }