Plane Trails

index.html

<svg id="patternSVG" xmlns="http://www.w3.org/2000/svg">
	<defs>
	<pattern id="sqrs" width="20" height="20" patternUnits="userSpaceOnUse" id="pulseBg" viewBox="0 0 20 20" >
			<rect class="grid" x="0" y="0" width="20" height="20"  fill="none"/>		
	</pattern>
	</defs>
	<rect id="grid"  class="grid" fill="url(#sqrs)" width="100%" height="100%" />
	
	
	</svg>

<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
	<defs>


      <filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
        <feGaussianBlur stdDeviation="8" result="coloredBlur" />
        <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
        <feFlood id="glowAlpha" flood-color="#FFF" flood-opacity="1"></feFlood>
        <feComposite in2="offsetblur" operator="in"></feComposite>
        <feMerge>
          <feMergeNode/>          
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>	
</defs>
	
	<g >
		<polyline class="trailLine"/>
		<polyline class="trailLine"/>
		<polyline class="trailLine"/>
		<polyline class="trailLine"/>
		<polyline class="trailLine"/>
		<polyline class="trailLine"/>
			<path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20
    l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" />
			<path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20
    l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" />
			<path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20
    l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" />
			<path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20
    l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" />
			<path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20
    l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" />
			<path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20
    l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" />
		</g>

</svg>

plane-trails.markdown

Plane Trails

This is very calming to watch and it's different every time you watch.

A Pen by Manuel Romero on CodePen.

License.

script.js

const select = s => document.querySelector(s),
  selectAll = s =>  document.querySelectorAll(s);
let	mainSVG = select('#mainSVG'),
			trailLine = select('#trailLine'),
			numPoints = 300,
		svgHeight = 600,
			height = svgHeight,
		allPlanes = gsap.utils.toArray('.plane'),
		allPulseLines = gsap.utils.toArray('.trailLine'),
		planeColorArray = ['#04BCE8', '#EA6360', '#4EBE92', '#A83395', '#4A52A6', '#F2CD5D'],
		planeWidth = allPlanes[0].getBBox().width;

gsap.defaults({lazy:true}) 

gsap.set('svg', {
	visibility: 'visible'
})
gsap.set(allPlanes, {
	transformOrigin: '50% 100%',
	yPercent: -20
})
let p = CustomEase.create('trail', 'M0,0 C0,0 0.08957,0.04997 0.14563,0.07332 0.17361,0.08497 0.19406,0.08816 0.22447,0.09346 0.25234,0.09831 0.27245,0.10281 0.29876,0.1 0.3304,0.09662 0.3574,0.09206 0.38526,0.07627 0.46146,0.0331 0.50906,-0.01658 0.58698,-0.06332 0.61735,-0.08154 0.64322,-0.09168 0.67604,-0.09815 0.70315,-0.10349 0.72556,-0.09999 0.75503,-0.09644 0.7862,-0.09269 0.8064,-0.0881 0.83671,-0.07879 0.87049,-0.06842 0.89148,-0.06013 0.92338,-0.04473 0.95378,-0.03007 1,0 1,0 ');

const swayPlane = (_id) => {

	gsap.set(allPlanes[_id], {
		x: allPulseLines[_id].points[0].x - (planeWidth/2),
		y: allPulseLines[_id].points[0].y - planeWidth
	})
		gsap.to(allPlanes[_id], {
			duration: 0.1,
			rotation: ((planeInitArray[_id].x - (allPulseLines[_id].points[50].x)) * 0.72),
			ease: 'sine.inOut'
		})
}

let planeInitArray = []									 
let duration = gsap.utils.random(5, 20);
for(var j = 0; j < allPlanes.length; j++) {
	let trailLine = allPulseLines[j];
	let pointX = gsap.utils.random(250, 350);
	let heightMultiplier = gsap.utils.random(0.11, 0.8);
	gsap.set(allPulseLines[j], {
		stroke: planeColorArray[j]
	})
	
	for(let i = 0; i < numPoints; i++) {
		let point = trailLine.points.appendItem(mainSVG.createSVGPoint())
		point.x = pointX;
		gsap.set(point, {
			y:(height * heightMultiplier) + (i * ((height ) / numPoints))
		})			
	}

	planeInitArray.push({x: trailLine.points[0].x, y: trailLine.points[0].y} );
	
	
	let tl = gsap.timeline();
	tl.to(allPulseLines[j].points, {
		duration: gsap.utils.random(7, 14),
		x: '-=' + gsap.utils.random(-600, 600),
		stagger: {
			each: duration / 1000,
			repeat: -1
		},
		onUpdate: swayPlane,
		onUpdateParams:[j],
		ease: 'trail'
	}).seek(gsap.utils.random(300, 1000));
	

}


gsap.to(allPulseLines, {
	strokeDashoffset:-(14 * 4),
	repeat: -1,
	ease: 'none'
})

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline_3_0.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js?v=8"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js?v=6"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js"></script>

style.css

body {
background-color: #141723 ;
/* background-color: #FFF ; */
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center;
	
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
:root {
	--line-stroke: #0074b3;
	/* --grid-stroke: #00adef; */
	--line-stroke-width: 1.5;
	--circle-fill: #00adef;
	--circle-stroke: #0074b3;
}

svg {
	position: absolute;
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}
.trailLine {
	stroke:var(--line-stroke);
	stroke-width: var(--line-stroke-width);
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 4 10
}
.grid {
	stroke:var(--circle-stroke);
	
	
}
#grid {
	
	opacity: 0.085;
	
}
#glowAlpha {
	flood-color: var(--circle-stroke)
}
.plane {
	fill:#CCC;
}