<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.5 222.6" class="polyplane">
  <defs>
    <linearGradient id="side-gradient" gradientUnits="userSpaceOnUse" x1="358.3431" y1="-18.6133" x2="37.5315" y2="245.9408">
      <stop  offset="5.618000e-03" style="stop-color:#D7F0FC"/>
      <stop  offset="0.2382" style="stop-color:#BAE6FB"/>
      <stop  offset="0.4031" style="stop-color:#ABE1FA"/>
      <stop  offset="1" style="stop-color:#96CFF1"/>
    </linearGradient>

    <linearGradient id="wing-gradient-far" gradientUnits="userSpaceOnUse" x1="149.4565" y1="57.112" x2="407.0489" y2="-62.3254">
      <stop  offset="5.618000e-03" style="stop-color:#D7F0FC"/>
      <stop  offset="0.552" style="stop-color:#ABE1FA"/>
      <stop  offset="1" style="stop-color:#96CFF1"/>
    </linearGradient>

    <linearGradient id="channel-gradient" gradientUnits="userSpaceOnUse" x1="65.0728" y1="176.502" x2="392.601" y2="50.4824">
      <stop  offset="5.618000e-03" style="stop-color:#D7F0FC"/>
      <stop  offset="0.5305" style="stop-color:#ABE1FA"/>
      <stop  offset="0.7715" style="stop-color:#9DD5F4"/>
      <stop  offset="1" style="stop-color:#96CFF1"/>
    </linearGradient>

    <linearGradient id="wing-gradient-near" gradientUnits="userSpaceOnUse" x1="252.8048" y1="131.8038" x2="439.4579" y2="45.2588">
      <stop  offset="5.618000e-03" style="stop-color:#D7F0FC"/>
      <stop  offset="0.552" style="stop-color:#ABE1FA"/>
      <stop  offset="1" style="stop-color:#96CFF1"/>
    </linearGradient>

    <filter id="polycleaner" color-interpolation-filters="sRGB">
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0.5 1 1" />
      </feComponentTransfer>
    </filter>
  </defs>

  <g filter="url(#polycleaner)" id="plane">
    <g id="channel">
      <polygon fill="url(#channel-gradient)" id="chan" points="289.5,0 0,110.5 16,222.6 54.5,133.3"/>
    </g>

    <g id="side">
      <polygon fill="url(#side-gradient)" id="panel" points="16,222.6 289.5,0 0,110.5"/>
    </g>

    <g id="wings">
      <polygon id="wing-near" fill="url(#wing-gradient-near)" points="289.5,0 0,110.5 16,222.6"/>
      <polygon id="wing-far" fill="url(#wing-gradient-far)" points="289.5,0 0,110.5 16,222.6"/>
    </g>
  </g>
</svg>
html,body{height:100%;}body{display:flex;flex-direction:column;align-items:center;justify-content:center;width: 100%;background:#6DBFEE;}

body {
  overflow: hidden;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.275;
}

.polyplane:not(:root) {
  overflow: visible;
}

.polyplane {
  height: auto;
  max-width: 100%;
  width: 140px;
  animation: auto-pilot 6000ms cubic-bezier(0.68, 0.21, 0.34, 0.85) infinite alternate;
}

@keyframes auto-pilot {
  50% {
    transform: translateY(50px);
  }

  100% {
    transform: translateY(-50px);
  }
}
View Compiled
// ============================================================
// PolyPlane
// ============================================================

function polyPlane() {

  var channelStart  = [ 289.5,0, 0,110.5, 16,222.6, 54.5,133.3 ],
      channelEnd    = [ 372.5,0, 83,110.5, 99,222.6, 137.5,133.3 ],
      sideStart     = [ 16,222.6,289.5,0,0,110.5 ],
      sideEnd       = [ 99,222.6, 372.5,0, 137.5,133.3 ],
      wingNearStart = [ 289.5,0, 0,110.5, 16,222.6 ],
      wingNearEnd   = [ 372.5,0, 137.5,133.3, 288.4,191.6 ],
      wingFarStart  = [ 289.5,0, 0,110.5, 16,222.6 ],
      wingFarEnd    = [ 372.5,0, 83,110.5, 0,80.1 ],
      ch            = Snap.select('#chan'),
      si            = Snap.select('#panel'),
      wn            = Snap.select('#wing-near'),
      wf            = Snap.select('#wing-far'),
      speed         = 2112,
      eaze          = mina.bounce;

  var channel = ch.attr({
    points: channelStart
  });

  var side = si.attr({
    points: sideStart
  });

  var wing_near = wn.attr({
    points: wingNearStart
  });

  var wing_far = wf.attr({
    points: wingFarStart
  });

  channel.animate({
    points: channelEnd
  }, speed, eaze);

  side.animate({
    points: sideEnd
  }, speed, eaze);

  wing_near.animate({
    points: wingNearEnd
  }, speed, eaze);

  wing_far.animate({
    points: wingFarEnd
  }, speed, eaze);
}

polyPlane();


// ============================================================
// PolyClouds
// forked pen https://codepen.io/grayghostvisuals/pen/qdpPqo
// ============================================================

function HSLA(h, s, l, a) {
	this.h = h;
	this.s = s;
	this.l = l;
	this.a = a === 0 ? 0 : (a ? a : 1);
}

HSLA.prototype = {
	clone : function() {
		return new HSLA(this.h, this.s, this.l, this.a);
	},

	toString : function() {
		var h = Math.round(this.h),
        s = Math.round(this.s),
        l = Math.round(this.l);

    return "hsla(" + h + ", " + s + "%, " + l + "%, " + this.a + ")";
	}
}

var canvas = document.createElement('canvas'),
    width,
    height;

function canvasStage() {
  // Make canvas width && height equal to window's inner width / height
  // rather than setting an exact size of canvas.
  canvas.width = width = window.innerWidth;
  canvas.height = height = window.innerHeight;
}

canvasStage();

var body = document.getElementsByTagName('body')[0];

body.appendChild(canvas);

var ctx       = canvas.getContext('2d'),
    framerate = 6;

function Node () {
	this.x      = this.y = 0;
	this.vx     = this.vy = 0;
	this.top    = null;
	this.bottom = null;
	this.left   = null;
	this.right  = null;
}

var color            = new HSLA(200, 80, 40, 0),
    friction         = 0.999,
    ranVel           = 0.3,
    nx               = ny = 15,
    constraintLength = 25,
    constraintForce  = 0.5,
    boundaryForce    = 0.004,
    dx               = 0.5 * (width - (nx * constraintLength)),
    dy               = 0.5 * (height - (nx * constraintLength));

function Cloud() {
	this.nodes = [];
	for(var j = 0; j < ny; j++) {
		for(var i = 0; i < nx; i++) {
			var node = new Node();
			node.x = i * constraintLength + dx;
			node.y = j * constraintLength + dy;
			var id = this.nodes.length;
			if(i > 0) {
				node.left = this.nodes[id - 1];
				node.left.right = node;
			}
			if(j > 0) {
				node.top = this.nodes[id - nx];
				node.top.bottom = node;
			}

			node.vx += 0.1 * (Math.random() * 2 - 1);
			node.vy += 0.1 * (Math.random() * 2 - 1);
			node.color = color.clone();
			node.color.l += Math.random() * (100 - color.l);
			node.color.a = 0.5;

			this.nodes[id] = node;
		}
	}

}

Cloud.prototype = {

	update : function () {
		var n = this.nodes.length;
		for(var i = 0; i < n; i++) {
			var node = this.nodes[i];
			if(node.bottom) this.applyConstraint(node, node.bottom);
			if(node.right) this.applyConstraint(node, node.right);
			node.vx += ranVel * (Math.random() * 2 - 1);
			node.vy += ranVel * (Math.random() * 2 - 1);
			node.vx *= friction;
			node.vy *= friction;
			node.x += node.vx;
			node.y += node.vy;

			if(node.x < 0)
				node.vx += boundaryForce;
			else if(node.x > width)
				node.vx -= boundaryForce;

      if(node.y < 0)
				node.vy += boundaryForce;
			else if(node.y > height)
				node.vy -= boundaryForce;
		}
	},

	applyConstraint : function (a, b) {
		var dx    = b.x - a.x,
        dy    = b.y - a.y,
        dist  = Math.sqrt(dx * dx + dy * dy),
        delta = constraintLength - dist,
        ratio = 0.5 * delta / dist;

    a.x -= constraintForce * dx * ratio;
		a.y -= constraintForce * dy * ratio;
		b.x += constraintForce * dx * ratio;
		b.y += constraintForce * dy * ratio;
	},

	draw : function () {
		var n = this.nodes.length;

    for(var i = 0; i < n; i++) {
			var node = this.nodes[i];
			if(node.top && node.left) {
				ctx.fillStyle = node.color.toString();
				ctx.beginPath();
				ctx.moveTo(node.x, node.y);
				ctx.lineTo(node.left.x, node.left.y);
				ctx.lineTo(node.left.top.x, node.left.top.y);
				ctx.lineTo(node.top.x, node.top.y);
				ctx.lineTo(node.x, node.y);
				ctx.fill();
			}
		}
	}
}

var cloud1 = new Cloud(),
    cloud2 = new Cloud(),
    cloud3 = new Cloud();

function update() {
	ctx.clearRect(0, 0, width, height);
	ctx.fillStyle = color.toString();
	ctx.fillRect(0, 0, width, height);
  cloud1.update();
	cloud2.update();
  cloud3.update();
	cloud1.draw();
	cloud2.draw();
  cloud3.draw();
	setTimeout(update.bind(this), framerate);
}


window.addEventListener('resize', function(){
  canvasStage();
}, false);

update();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js
  2. https://codepen.io/grayghostvisuals/pen/a08e0d79c150ff5030f9b6afaa137749