console
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
mainSVG = select('.mainSVG'),
orbit = select('#orbit'),
dot = select('#dot'),
startShape = select('#startShape'),
endShape = select('#endShape'),
shapeGroup = select('#shapeGroup'),
pContainer = select('#pContainer'),
particlePool = [],
numParticles = 400,
particleCount = 0
TweenMax.set('svg', {
visibility: 'visible'
}) TweenMax.set(['#startShape', '#endShape'], {
transformOrigin: '50% 50%'
})
var orbitPath = MorphSVGPlugin.pathDataToBezier(orbit.getAttribute('d'), {
offsetX: 0,
offsetY: 0
})
var mainTl = new TimelineMax();
var tl = new TimelineMax({
repeat: -1,
yoyo: false
});
var tl2 = new TimelineMax({
repeat: -1,
yoyo: false,
onUpdate: playParticle
});
tl2.to(dot, 6, {
bezier: {
type: "cubic",
values: orbitPath,
autoRotate: false
},
ease: Linear.easeNone
})
//shapes
tl.to('#startShape', 20, {
rotation: 360,
ease: Linear.easeNone
})
.to('#endShape', 20, {
rotation: -360,
ease: Linear.easeNone
},
'-=20')
function createParticles() {
var i = numParticles,
p;
while (--i > -1) {
p = document.createElementNS(xmlns, 'use');
p.setAttributeNS(xlinkns, "xlink:href", '#particle');
pContainer.appendChild(p);
//p.setAttributeNS(null, 'fill', particleColorArray[i % particleColorArray.length]);
p.setAttributeNS(null, 'opacity', 0);
p.setAttribute('class', "particle");
particlePool.push(p);
}
}
function playParticle() {
var p = particlePool[particleCount];
var curr = {
x: dot._gsTransform.x,
y: dot._gsTransform.y
};
var rad = Math.atan2(curr.y - 300, curr.x - 400);
var deg = Math.round(rad * (180 / Math.PI));
//console.log(deg)
//console.log(dot._gsTransform.x)
TweenMax.set(p, {
x: randomBetween(curr.x, curr.x - 5),
y: randomBetween(curr.y, curr.y + 5),
alpha: 1,
transformOrigin: '50% 50%'
});
var tl = new TimelineMax();
tl.to(p, randomBetween(3, 6), {
//paused:true,
physics2D: {
velocity: randomBetween(5, 10),
angle: (deg % 2) ? deg: deg - 180,
//randomBetween(-95, -85),
gravity: randomBetween( - 1, 1)
},
scale: randomBetween(0, 3.3),
//rotation:randomBetween(180, 780),
onComplete: completeParticle,
onCompleteParams: [p],
alpha: 0
//skewY:(Math.random() * 180),
//ease: Power4.easeIn,
//onStart:flicker,
//onStartParams:[p]
});
particleCount++;
particleCount = (particleCount >= numParticles) ? 0 : particleCount
}
function flicker(p) {
//console.log("flivker")
TweenMax.killTweensOf(p, {
alpha: true
});
TweenMax.fromTo(p, 0.4, {
alpha: 1
},
{
alpha: Math.random(),
ease: RoughEase.ease.config({
template: Power0.easeNone,
strength: 3,
points: 6,
taper: "both",
randomize: true,
clamp: false
}),
repeat: -1
})
}
function completeParticle(p) {
TweenMax.set(p, {
x: -10,
y: -10,
alpha: 1,
scale: 1
})
}
function randomBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
createParticles();
mainTl.add(tl, 0);
mainTl.add(tl2, 0);
//ScrubGSAPTimeline(mainTl)
mainTl.timeScale(1)
TweenMax.globalTimeScale(1)
<svg class="mainSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9"
result="cm" />
<feBlend/>
</filter>
<filter id="glow" x="-100%" y="-100%" width="250%" height="250%" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="10" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur">
</feOffset>
<feFlood id="glowAlpha" flood-color="#43598F" flood-opacity="1">
</feFlood>
<feComposite in2="offsetblur" operator="in">
</feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic">
</feMergeNode>
</feMerge>
</filter>
<filter id="blur" x="-100%" y="-100%" width="250%" height="250%" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="3" />
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic">
</feMergeNode>
</feMerge>
</filter>
<radialGradient id="bgGrad" cx="400" cy="300" r="320" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#10316B" />
<stop offset="0.86" style="stop-color:#081029" />
</radialGradient>
<circle id="particle" cx="0" cy="0" r="1" fill="#FFF" />
</defs>
<rect fill="url(#bgGrad)" width="800" height="600" />
<radialGradient id="dotGrad" cx="0" cy="0" r="24" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:1" />
<stop offset="0.3" style="stop-color:#0867C7;stop-opacity:0.6" />
<stop offset="0.8" style="stop-color:#081029;stop-opacity:0" />
</radialGradient>
<g id="shapeGroup" filter="url(#glow)">
<path id="startShape" class="shape" fill="none" stroke="#1276DB" stroke-width="5"
stroke-miterlimit="10" d="M570.1,305
c2,17-10.8,21.3-14.1,38c-1.9,17.1,7.8,45.5,1.6,59.4c-5.9,14.6-29.8,11.8-45.5,25.3c-7,6-14.6,19-23.8,28.6
c-9.1,9.9-19.9,16.3-31.8,17.7c-21.1,3.2-33.6-8.1-55.8-8.4c-21.9,1.8-53.9,11.2-70.2,8.5c-17.2-1.2-15.5-21.3-31.4-30.7
c-16.1-8.4-51.4-8.8-60.8-24.5c-9.7-15.1,3.9-35-1.6-53.6c-2.4-8.1-10.1-19.3-14.5-29.9c-4.8-10.7-6.4-20.9-6.3-30.1
c0.3-8.6,3-14.5,8.3-20.5c5-6,12.7-12.1,14.9-20.9c5.2-18.1-1.3-49.5,9.4-63.8c10.4-14.6,32.6-10,47.3-22.6c6.7-5.6,14.5-17.6,23-26
c8.5-8.8,17.9-13.9,27.1-15.1c16.1-3,23.2,7.5,40.1,8c16.5-1.7,41.3-10.6,53-8c12.4,0.6,12.8,18.9,27.9,27.9
c14.9,7.9,45.8,6.3,59.5,21.4c13.8,14.9,5.5,37.5,14.7,56.6c4,8.5,13.7,20.3,19.6,31.6C567.3,284.9,569.8,295.7,570.1,305z"
/>
<path id="orbit" fill="none" stroke="none" stroke-width="4" stroke-miterlimit="10"
d="M561.3,302.1c0.6,10-2.4,23.7-4.8,34.9
c-2.3,11.5-1.5,21.5-7.3,33.3c-5.8,12.1-21,23.2-32,33.5c-11,10.4-16.6,22.9-29.5,33.1c-12.7,10-33.1,15.2-49.4,21.8
c-15.7,6.8-28.2,14.7-45.2,15.6c-16.9,1.5-37.1-1-53.9-2.6c-17.2-1.7-33.1,0.7-48.4-5c-15.6-5.8-25.8-23-34.4-34.3
c-8.8-11.3-18.2-16.4-22.5-29.1c-4.1-12.5-3.3-32.5-4.9-48.6c-1.7-15.6-4.6-27.5-4.2-46.9c-0.2-19.3,5.3-44.9,12.1-65.7
c6.5-21.4,10.5-41.9,23.2-57.9c13.1-16.3,33-23.7,45.4-30.4c12.6-6.9,19.2-13.5,28.3-15.4c8.9-1.9,21.3-0.3,31.3-0.7
c9.6-0.4,15.5-2.4,27.9-1.5c12.5,0.5,30.9,6.7,45.8,13.5c15.3,6.6,30,10.8,44,22.6c14.3,12,24,30.7,33,43.2
c9.2,12.7,19.7,20.1,26,29.8c6.1,9.6,7.4,22.1,10.8,31.7C556.2,286.3,561.2,292.1,561.3,302.1z"
/>
<path id="endShape" class="shape" fill="none" stroke="#1497FC" stroke-width="5"
stroke-miterlimit="10" d="M565.2,305.1
c0.2,14.1-7.5,31.8-11.4,46.5c-3.3,15.3,1.5,30-4.3,44c-5.6,14.5-25.8,22.8-37.4,32.9c-11.5,10.5-14.5,26.1-27.8,31.9
c-13,5.9-34.7,2.5-50.4,5.5c-15.3,3.5-25.3,11.3-40.8,11.1c-15.7,1.4-36.2-6.5-52.8-11.1c-17.2-3.9-34.7,1.6-49.8-6.1
c-15.4-7.8-22.2-30.4-31.5-42.6c-9.8-12.3-23.3-16.1-27-28.7c-3.9-12.2-0.7-32.1-2.6-46.6c-2.4-14-8.4-22.2-8.4-37
c-1.6-15.1,6.5-35.7,11.9-51.9c4.7-16.8,0.6-34.6,9.4-49.6c8.9-15.4,31.2-21.7,43.8-31.2c12.6-10,17.7-25.1,29.9-29.4
c11.9-4.5,30.3,0,43.6-1.9c13-2.5,20.7-9,33.6-7.9c13.1-0.4,30.6,7.2,44.7,11.6c14.7,3.8,29.2-0.5,43,6.2
c14.3,6.5,22.5,26.9,32.9,38.8c10.8,11.8,27.5,15.7,34.3,28.8c6.8,12.9,2.9,33.6,6.1,48.4C557.9,281.3,566.5,291.1,565.2,305.1z"
/>
</g>
<circle id="dot" fill="url(#dotGrad)" cx="0" cy="0" r="24" />
<g id="pContainer" />
</svg>
body {
background-color: #081029;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
.particle,
.shape {
mix-blend-mode: soft-light
}
#dot {
mix-blend-mode: screen;
}
text {
font-family: Antic, sand-serif;
font-size: 54px;
letter-spacing: -1px;
}