SOURCE

console 命令行工具 X clear

                    
>
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" />
  <!-- <g filter="url(#blur)"> -->
  <!-- <circle id="dot" cx="0" cy="0" r="4" fill="#FFF" />
  -->
  <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> -->
  <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;
}

本项目引用的自定义外部资源