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
})
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, '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));
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), {
physics2D: {
velocity: randomBetween(5, 10),
angle:(deg % 2) ? deg : deg - 180,
gravity:randomBetween(-1, 1)
},
scale:randomBetween(0, 3.3),
onComplete:completeParticle,
onCompleteParams:[p],
alpha:0
});
particleCount++;
particleCount = (particleCount >=numParticles) ? 0 : particleCount
}
function flicker(p){
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);
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;
}