This is very calming to watch and it's different every time you watch.
A Pen by Manuel Romero on CodePen.
<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> |
This is very calming to watch and it's different every time you watch.
A Pen by Manuel Romero on CodePen.
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' | |
}) |
<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> |
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; | |
} |