11+ JavaScript Particle Background Examples

This post contains a total of 11+ JavaScript Particle Background Examples with Source Code. All these Particle Backgrounds are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Particle Background Examples

1. By Brandon Corlett

Made by Brandon Corlett. Circle Particle Background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin: 0;
  font:normal 75% Arial, Helvetica, sans-serif;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
</style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<div id='particles-js'></div>
      <script>
particlesJS("particles-js", {
  'particles': {
    'number': {
      'value': 80,
      'density': {
        'enable': true,
        'value_area': 800 } },


    'color': {
      'value': ['#aa73ff', '#f8c210', '#83d238', '#33b1f8'] },

    'shape': {
      'type': ['circle'],
      'stroke': {
        'width': 2,
        'color': '#222222' },


      'polygon': {
        'nb_sides': 5 } },



    'opacity': {
      'value': 0.75,
      'random': false,
      'anim': {
        'enable': false,
        'speed': 3,
        'opacity_min': 0.25,
        'sync': false } },


    'size': {
      'value': 20,
      'random': true,
      'anim': {
        'enable': false,
        'speed': 80,
        'size_min': 0.25,
        'sync': false } },


    'line_linked': {
      'enable': true,
      'distance': 150,
      'color': '#cccccc',
      'opacity': 0.5,
      'width': 1.5 },

    'move': {
      'enable': true,
      'speed': 12,
      'direction': 'none',
      'random': false,
      'straight': false,
      'out_mode': 'out',
      'bounce': false,
      'attract': {
        'enable': false,
        'rotateX': 600,
        'rotateY': 1200 } } },



  'interactivity': {
    'detect_on': 'canvas',
    'events': {
      'onhover': {
        'enable': false,
        'mode': ['', '', ''] },

      'onclick': {
        'enable': true,
        'mode': ['', '', '', 'repulse'] },

      'resize': true },

    'modes': {
      'grab': {
        'distance': 800,
        'line_linked': {
          'opacity': 1 } },


      'bubble': {
        'distance': 800,
        'size': 80,
        'duration': 2,
        'opacity': 0.8,
        'speed': 3 },

      'repulse': {
        'distance': 400,
        'duration': 0.4 },

      'push': {
        'particles_nb': 4 },

      'remove': {
        'particles_nb': 2 } } },

  'retina_detect': true });
    </script>
</body>
</html>

2. By Jen

Made by Jen. Grayscale Ambient Background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body {
	width:100%; 
	height:100%; 
	padding:0px; 
	margin:0px;
	overflow: hidden;
	background: #191d1e; /* Old browsers */
	background: -moz-linear-gradient(0deg,  #191d1e 50%, #283139 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#191d1e), color-stop(100%,#283139)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* IE10+ */
	background: linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191d1e', endColorstr='#283139',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-attachment: fixed
}

#projector {
  position: absolute; 
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
} 

.center-div {
	width:580px;
    height:374px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left: -290px;
    margin-top:  -187px;
}

#preloaderDiv
{
	position:absolute;
	left:50%;
    top:50%;
    margin-left: -27px;
    margin-top:  -27px;
}

#logo{
	opacity:0;
    filter: alpha(opacity=0);
}

#date2014
{
	position:absolute;
	padding-left: 210px;
	padding-top:15px;
	opacity:0;
	top:303px;
	left:0;
    filter: alpha(opacity=0);
}
</style>
</head>
<body>
  <canvas id="projector">Your browser does not support the Canvas element.</canvas>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://code.createjs.com/easeljs-0.7.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
      <script>

var ParticleEngine = function () {
  'use strict';

  function ParticleEngine(canvas_id) {
    // enforces new
    if (!(this instanceof ParticleEngine)) {
      return new ParticleEngine(args);
    }

    var _ParticleEngine = this;

    this.canvas_id = canvas_id;
    this.stage = new createjs.Stage(canvas_id);
    this.totalWidth = this.canvasWidth = document.getElementById(canvas_id).width = document.getElementById(canvas_id).offsetWidth;
    this.totalHeight = this.canvasHeight = document.getElementById(canvas_id).height = document.getElementById(canvas_id).offsetHeight;
    this.compositeStyle = "lighter";

    this.particleSettings = [{ id: "small", num: 300, fromX: 0, toX: this.totalWidth, ballwidth: 3, alphamax: 0.4, areaHeight: .5, color: "#F0F0F0", fill: false },
    { id: "medium", num: 100, fromX: 0, toX: this.totalWidth, ballwidth: 8, alphamax: 0.3, areaHeight: 1, color: "#C0C0C0", fill: true },
    { id: "large", num: 10, fromX: 0, toX: this.totalWidth, ballwidth: 30, alphamax: 0.2, areaHeight: 1, color: "#A0A0A0", fill: true }];
    this.particleArray = [];
    this.lights = [{ ellipseWidth: 400, ellipseHeight: 100, alpha: 0.6, offsetX: 0, offsetY: 0, color: "#D0D0D0" },
    { ellipseWidth: 350, ellipseHeight: 250, alpha: 0.3, offsetX: -50, offsetY: 0, color: "#B8B8B8" },
    { ellipseWidth: 100, ellipseHeight: 80, alpha: 0.2, offsetX: 80, offsetY: -50, color: "#F8F8F8" }];

    this.stage.compositeOperation = _ParticleEngine.compositeStyle;


    function drawBgLight()
    {
      var light;
      var bounds;
      var blurFilter;
      for (var i = 0, len = _ParticleEngine.lights.length; i < len; i++) {if (window.CP.shouldStopExecution(0)) break;
        light = new createjs.Shape();
        light.graphics.beginFill(_ParticleEngine.lights[i].color).drawEllipse(0, 0, _ParticleEngine.lights[i].ellipseWidth, _ParticleEngine.lights[i].ellipseHeight);
        light.regX = _ParticleEngine.lights[i].ellipseWidth / 2;
        light.regY = _ParticleEngine.lights[i].ellipseHeight / 2;
        light.y = light.initY = _ParticleEngine.totalHeight / 2 + _ParticleEngine.lights[i].offsetY;
        light.x = light.initX = _ParticleEngine.totalWidth / 2 + _ParticleEngine.lights[i].offsetX;

        blurFilter = new createjs.BlurFilter(_ParticleEngine.lights[i].ellipseWidth, _ParticleEngine.lights[i].ellipseHeight, 1);
        bounds = blurFilter.getBounds();
        light.filters = [blurFilter];
        light.cache(bounds.x - _ParticleEngine.lights[i].ellipseWidth / 2, bounds.y - _ParticleEngine.lights[i].ellipseHeight / 2, bounds.width * 2, bounds.height * 2);
        light.alpha = _ParticleEngine.lights[i].alpha;

        light.compositeOperation = "screen";
        _ParticleEngine.stage.addChildAt(light, 0);

        _ParticleEngine.lights[i].elem = light;
      }window.CP.exitedLoop(0);

      TweenMax.fromTo(_ParticleEngine.lights[0].elem, 10, { scaleX: 1.5, x: _ParticleEngine.lights[0].elem.initX, y: _ParticleEngine.lights[0].elem.initY }, { yoyo: true, repeat: -1, ease: Power1.easeInOut, scaleX: 2, scaleY: 0.7 });
      TweenMax.fromTo(_ParticleEngine.lights[1].elem, 12, { x: _ParticleEngine.lights[1].elem.initX, y: _ParticleEngine.lights[1].elem.initY }, { delay: 5, yoyo: true, repeat: -1, ease: Power1.easeInOut, scaleY: 2, scaleX: 2, y: _ParticleEngine.totalHeight / 2 - 50, x: _ParticleEngine.totalWidth / 2 + 100 });
      TweenMax.fromTo(_ParticleEngine.lights[2].elem, 8, { x: _ParticleEngine.lights[2].elem.initX, y: _ParticleEngine.lights[2].elem.initY }, { delay: 2, yoyo: true, repeat: -1, ease: Power1.easeInOut, scaleY: 1.5, scaleX: 1.5, y: _ParticleEngine.totalHeight / 2, x: _ParticleEngine.totalWidth / 2 - 200 });
    }

    var blurFilter;
    function drawParticles() {

      for (var i = 0, len = _ParticleEngine.particleSettings.length; i < len; i++) {if (window.CP.shouldStopExecution(1)) break;
        var ball = _ParticleEngine.particleSettings[i];

        var circle;
        for (var s = 0; s < ball.num; s++)
        {if (window.CP.shouldStopExecution(2)) break;
          circle = new createjs.Shape();
          if (ball.fill) {
            circle.graphics.beginFill(ball.color).drawCircle(0, 0, ball.ballwidth);
            blurFilter = new createjs.BlurFilter(ball.ballwidth / 2, ball.ballwidth / 2, 1);
            circle.filters = [blurFilter];
            var bounds = blurFilter.getBounds();
            circle.cache(-50 + bounds.x, -50 + bounds.y, 100 + bounds.width, 100 + bounds.height);
          } else {
            circle.graphics.beginStroke(ball.color).setStrokeStyle(1).drawCircle(0, 0, ball.ballwidth);
          }

          circle.alpha = range(0, 0.1);
          circle.alphaMax = ball.alphamax;
          circle.distance = ball.ballwidth * 2;
          circle.ballwidth = ball.ballwidth;
          circle.flag = ball.id;
          _ParticleEngine.applySettings(circle, ball.fromX, ball.toX, ball.areaHeight);
          circle.speed = range(2, 10);
          circle.y = circle.initY;
          circle.x = circle.initX;
          circle.scaleX = circle.scaleY = range(0.3, 1);

          _ParticleEngine.stage.addChild(circle);


          animateBall(circle);

          _ParticleEngine.particleArray.push(circle);
        }window.CP.exitedLoop(2);
      }window.CP.exitedLoop(1);
    }

    this.applySettings = function (circle, positionX, totalWidth, areaHeight)
    {
      circle.speed = range(1, 3);
      circle.initY = weightedRange(0, _ParticleEngine.totalHeight, 1, [_ParticleEngine.totalHeight * (2 - areaHeight / 2) / 4, _ParticleEngine.totalHeight * (2 + areaHeight / 2) / 4], 0.8);
      circle.initX = weightedRange(positionX, totalWidth, 1, [positionX + (totalWidth - positionX) / 4, positionX + (totalWidth - positionX) * 3 / 4], 0.6);
    };

    function animateBall(ball)
    {
      var scale = range(0.3, 1);
      var xpos = range(ball.initX - ball.distance, ball.initX + ball.distance);
      var ypos = range(ball.initY - ball.distance, ball.initY + ball.distance);
      var speed = ball.speed;
      TweenMax.to(ball, speed, { scaleX: scale, scaleY: scale, x: xpos, y: ypos, onComplete: animateBall, onCompleteParams: [ball], ease: Cubic.easeInOut });
      TweenMax.to(ball, speed / 2, { alpha: range(0.1, ball.alphaMax), onComplete: fadeout, onCompleteParams: [ball, speed] });
    }

    function fadeout(ball, speed)
    {
      ball.speed = range(2, 10);
      TweenMax.to(ball, speed / 2, { alpha: 0 });
    }

    drawBgLight();
    drawParticles();
  }

  ParticleEngine.prototype.render = function ()
  {
    this.stage.update();
  };

  ParticleEngine.prototype.resize = function ()
  {
    this.totalWidth = this.canvasWidth = document.getElementById(this.canvas_id).width = document.getElementById(this.canvas_id).offsetWidth;
    this.totalHeight = this.canvasHeight = document.getElementById(this.canvas_id).height = document.getElementById(this.canvas_id).offsetHeight;
    this.render();

    for (var i = 0, length = this.particleArray.length; i < length; i++)
    {if (window.CP.shouldStopExecution(3)) break;
      this.applySettings(this.particleArray[i], 0, this.totalWidth, this.particleArray[i].areaHeight);
    }window.CP.exitedLoop(3);

    for (var j = 0, len = this.lights.length; j < len; j++) {if (window.CP.shouldStopExecution(4)) break;
      this.lights[j].elem.initY = this.totalHeight / 2 + this.lights[j].offsetY;
      this.lights[j].elem.initX = this.totalWidth / 2 + this.lights[j].offsetX;
      TweenMax.to(this.lights[j].elem, .5, { x: this.lights[j].elem.initX, y: this.lights[j].elem.initY });
    }window.CP.exitedLoop(4);
  };

  return ParticleEngine;

}();

function range(min, max)
{
  return min + (max - min) * Math.random();
}

function round(num, precision)
{
  var decimal = Math.pow(10, precision);
  return Math.round(decimal * num) / decimal;
}

function weightedRange(to, from, decimalPlaces, weightedRange, weightStrength)
{
  if (typeof from === "undefined" || from === null) {
    from = 0;
  }
  if (typeof decimalPlaces === "undefined" || decimalPlaces === null) {
    decimalPlaces = 0;
  }
  if (typeof weightedRange === "undefined" || weightedRange === null) {
    weightedRange = 0;
  }
  if (typeof weightStrength === "undefined" || weightStrength === null) {
    weightStrength = 0;
  }

  var ret;
  if (to == from) {return to;}

  if (weightedRange && Math.random() <= weightStrength) {
    ret = round(Math.random() * (weightedRange[1] - weightedRange[0]) + weightedRange[0], decimalPlaces);
  } else {
    ret = round(Math.random() * (to - from) + from, decimalPlaces);
  }
  return ret;
}

var particles;
(function () {
  particles = new ParticleEngine('projector');
  createjs.Ticker.addEventListener("tick", updateCanvas);
  window.addEventListener('resize', resizeCanvas, false);

  function updateCanvas() {
    particles.render();
  }

  function resizeCanvas() {
    particles.resize();
  }
})();
    </script>
</body>
</html>

3. By Daneil Greaves

Made by Daneil Greaves. Gradient with particle background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> 
<style>
#particles-js{
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #1cd8d2; 
  background: -webkit-linear-gradient(to right, #1cd8d2, #93edc7);
  background: linear-gradient(to right, #1cd8d2, #93edc7);

}


h1{
  font-weight: bold;
  color: white;
  letter-spacing: 10px;
  text-transform: uppercase;
}
.row{
  margin-top: 200px;
}
.img
</style>
</head>
<body>
  <div class="img">
  <div id="particles-js"></div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <h1 class="text-center">Particularized</h1>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
<script src='https://threejs.org/examples/js/libs/stats.min.js'></script>
      <script>
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800 } },


    "color": {
      "value": "#ffffff" },

    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000" },

      "polygon": {
        "nb_sides": 5 },

      "image": {
        "src": "https://unsplash.it/200/300?image=931",
        "width": 100,
        "height": 100 } },


    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false } },


    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false } },


    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1 },

    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200 } } },



  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab" },

      "onclick": {
        "enable": true,
        "mode": "push" },

      "resize": true },

    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1 } },


      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3 },

      "repulse": {
        "distance": 200,
        "duration": 0.4 },

      "push": {
        "particles_nb": 4 },

      "remove": {
        "particles_nb": 2 } } },

  "retina_detect": true });
    </script>
</body>
</html>

4. By Rajkumar

Made by Rajkumar. JavaScript Particle Background using Particle.Js. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
#particles {
  position: absolute;
     width: 100%;
     height: 100%;
    z-index: 0;
  right:0;
  bottom:0;
  opacity: 0.6;
}
</style>
</head>
<body>
  <div id="particles"></div>
  <script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
      <script>
particlesJS("particles", {
  "particles": {
    "number": {
      "value": 200,
      "density": {
        "enable": true,
        "value_area": 800 } },


    "color": {
      "value": "#55ABDF" },

    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#55ABDF" },

      "polygon": {
        "nb_sides": 5 },

      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100 } },


    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false } },


    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false } },


    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#0084B0",
      "opacity": 0.4,
      "width": 1 },

    "move": {
      "enable": true,
      "speed": 2,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200 } } },

  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab" },

      "onclick": {
        "enable": true,
        "mode": "push" },

      "resize": true },

    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1 } },


      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3 },

      "repulse": {
        "distance": 200,
        "duration": 0.4 },

      "push": {
        "particles_nb": 4 },

      "remove": {
        "particles_nb": 2 } } },

  "retina_detect": true });
    </script>
</body>
</html>

5. By Angeal

Made by Angeal. Calm animated particle background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body {
  margin: 0;
  background:white;
  
}

::-webkit-scrollbar {
  z-index: 30;
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #2b2e33;
}
::-webkit-scrollbar-track {
  background-color: #181a1d;
}
</style>
</head>
<body>
  <div id="particle"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js'></script>
      <script>
particlesJS('particle', {
  'particles': {
    'number': {
      'value': 300,
      'density': {
        'enable': true,
        'value_area': 1800 } },


    'color': {
      'value': '#0051d7' },

    'shape': {
      'type': '',
      'random': true,
      'stroke': {
        'width': 0,
        'color': 'red' },

      'polygon': {
        'nb_sides': 6 } },


    'opacity': {
      'value': 0.5,
      'random': true,
      'anim': {
        'enable': false,
        'speed': 1,
        'opacity_min': 0.1,
        'sync': false } },


    'size': {
      'value': 80,
      'random': true,
      'anim': {
        'enable': true,
        'speed_min': .2,
        'size_min': 2,
        'sync': false } },


    'line_linked': {
      'enable': true,
      'distance': 200,
      'color': '#0051d7',
      'opacity': .3,
      'width': .6 },

    'move': {
      'enable': true,
      'speed_min': 6,
      'direction': 'none',
      'random': true,
      'straight': false,
      'out_mode': 'out',
      'bounce': false,
      'attract': {
        'enable': false,
        'rotateX': 1200,
        'rotateY': 1200 } } },



  'interactivity': {
    'detect_on': 'canvas',
    'events': {
      'onhover': {
        'enable': false,
        'mode': 'grab' },

      'onclick': {
        'enable': false,
        'mode': 'push' },

      'resize': true },

    'modes': {
      'grab': {
        'distance': 400,
        'line_linked': {
          'opacity': 1 } },


      'repulse': {
        'distance': 200,
        'duration': 0.4 },

      'push': {
        'particles_nb': 4 },

      'remove': {
        'particles_nb': 2 } } },

  'retina_detect': true });
    </script>
</body>
</html>

6. By Karl Saunders

Made by Karl Saunders. Canvas Hexagonal Particle Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  outline: 3px solid #999;
}
</style>
</head>
<body>
  <canvas></canvas>
      <script>
// Width of paths
var SIZE = 2.5;

// Max length of path before direction change
var LENGTH = 20;

// Max number of particles
var MAX = 100;

// Max particle life (seconds)
var LIFE = 8;


var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;


var particles = [];

function getRandomInt() {
  min = LIFE * 0.75;
  return Math.floor(Math.random() * (LIFE - min)) + min;
}

// Vector class
class Vector {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  get() {
    return new Vector(this.x, this.y);
  }
  add(v) {
    this.x += v.x, this.y += v.y;
  }
  sub(v) {
    this.x -= v.x, this.y -= v.y;
  }
  multi(v) {
    this.x *= v, this.y *= v;
  }
  divide(v) {
    this.x /= v, this.y /= v;
  }
  mag() {
    return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
  }
  normalize() {
    this.divide(this.mag());
  }
  rotate(cx, cy, angle) {
    const radians = Math.PI / 180 * angle;
    const cos = Math.cos(radians);
    const sin = Math.sin(radians);

    this.x = cos * (this.x - cx) + sin * (this.y - cy) + cx;
    this.y = cos * (this.y - cy) - sin * (this.x - cx) + cy;
  }}



var values = [-60, 60];

var t = new Vector(w / 2, h / 2);
var p = new Vector(w / 2, h / 2);


var rotateVector = function (v, ang)
{
  ang = -ang * (Math.PI / 180);
  var cos = Math.cos(ang);
  var sin = Math.sin(ang);
  return new Vector(Math.round(10 * (v.x * cos - v.y * sin)) / 10, Math.round(10 * (v.x * sin + v.y * cos)) / 10);
};

function Particle() {
  return {
    t: new Vector(w / 2, h / 2),
    p: new Vector(w / 2, h / 2),
    v: new Vector(Math.cos(Math.PI * 2 / 6), Math.sin(Math.PI * 2 / 6)),
    life: getRandomInt() };

}

var tick = 0;
function draw() {

  requestAnimationFrame(draw);

  tick += 0.1;

  if (particles.length < MAX) {
    particles.push(new Particle());
  }

  // Background
  ctx.shadowBlur = 0;
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(0,0,0,.04)';
  ctx.fillRect(0, 0, w, h);

  ctx.shadowBlur = 3;
  ctx.globalCompositeOperation = 'lighter';

  // Particles
  for (var i = 0; i < particles.length; i++) {
    var particle = particles[i];

    particle.p.add(particle.v);

    ctx.shadowColor = ctx.fillStyle = `hsla(${tick},80%,50%,.8)`;
    ctx.fillRect(particle.p.x, particle.p.y, SIZE, SIZE);

    var t = particle.t.get();
    t.sub(particle.p);

    if (t.mag() >= LENGTH) {
      var a = values[Math.floor(Math.random() * values.length)];
      particle.v = rotateVector(particle.v, a);
      particle.t = particle.p.get();
    }

    particle.life -= 1 / 60;

    if (particle.life <= 0) {
      particles[i] = new Particle();
    }
  }
}

draw();
    </script>
</body>
</html>

7. By andreas jv

Made by andreas jv. Particle background with fast animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100,200,400);
@import url(https://fonts.googleapis.com/css?family=Lato:100,200,300,400);
*, body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #222;
  color: #fff;
}

/* 
=================
  FOOTER STYLES
=================
*/
#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#footer:hover #sdew_2 p {
  color: #e16036;
}

#footer-tag {
  color: #fff;
}

#footer-tag a {
  color: #fff;
}

#footer-tag a:hover {
  color: #e16036;
}

.logo {
  width: 150px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  transform: translate(-15px, 0);
  color: #000;
  font-family: Josefin Slab, serif;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  font-size: 64px;
}

.logo p {
  font-family: Josefin Slab, serif;
}

.logo:hover #sdew_2 p {
  color: #e16036;
}

.element {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.element p {
  line-height: 1;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}

#sdew_1 {
  font-size: 64px;
  color: #fff;
  top: 1px;
  left: 50px;
}

#sdew_2 {
  font-size: 64px;
  color: #fff;
  top: 30px;
  left: 77px;
}

#sdew_2 p {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#sdew_3 {
  font-size: 64px;
  color: #fff;
  top: 40px;
  left: 92px;
}
</style>
</head>
<body>
  <!-- Pen content -->
<div class="wrap">
  <canvas id="canvas"></canvas>
</div> <!-- /content -->

<!-- Footer -->
<div id="footer">
  <div class="wrapper">
    <a href="https://andreasvirkus.github.io">
      <div class="logo">
        <div class="element logo-text pre-test" id="sdew_1" ><p>a</p></div> 
        <div class="element logo-text pre-test selected" id="sdew_2" ><p>J</p></div> 
        <div class="element logo-text pre-test" id="sdew_3" ><p>v</p></div>
      </div>
    </a>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
// RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = function () {
  return window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
}();

// Initializing the canvas
// I am using native JS here, but you can use jQuery, 
// Mootools or anything you want
var canvas = document.getElementById("canvas");

// Initialize the context of the canvas
var ctx = canvas.getContext("2d");

// Set the canvas width and height to occupy full window
var W = window.innerWidth,H = window.innerHeight;
canvas.width = W;
canvas.height = H;

// Some variables for later use
var particleCount = 150,
particles = [],
minDist = 70,
dist;

// Function to paint the canvas black
function paintCanvas() {
  // Set the fill color to black
  ctx.fillStyle = "rgba(0,0,0,1)";

  // This will create a rectangle of white color from the 
  // top left (0,0) to the bottom right corner (W,H)
  ctx.fillRect(0, 0, W, H);
}

// Now the idea is to create some particles that will attract
// each other when they come close. We will set a minimum
// distance for it and also draw a line when they come
// close to each other.

// The attraction can be done by increasing their velocity as 
// they reach closer to each other

// Let's make a function that will act as a class for
// our particles.

function Particle() {
  // Position them randomly on the canvas
  // Math.random() generates a random value between 0
  // and 1 so we will need to multiply that with the
  // canvas width and height.
  this.x = Math.random() * W;
  this.y = Math.random() * H;


  // We would also need some velocity for the particles
  // so that they can move freely across the space
  this.vx = -1 + Math.random() * 2;
  this.vy = -1 + Math.random() * 2;

  // Now the radius of the particles. I want all of 
  // them to be equal in size so no Math.random() here..
  this.radius = 4;

  // This is the method that will draw the Particle on the
  // canvas. It is using the basic fillStyle, then we start
  // the path and after we use the `arc` function to 
  // draw our circle. The `arc` function accepts four
  // parameters in which first two depicts the position
  // of the center point of our arc as x and y coordinates.
  // The third value is for radius, then start angle, 
  // end angle and finally a boolean value which decides
  // whether the arc is to be drawn in counter clockwise or 
  // in a clockwise direction. False for clockwise.
  this.draw = function () {
    ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

    // Fill the color to the arc that we just created
    ctx.fill();
  };
}

// Time to push the particles into an array
for (var i = 0; i < particleCount; i++) {
  particles.push(new Particle());
}

// Function to draw everything on the canvas that we'll use when 
// animating the whole scene.
function draw() {

  // Call the paintCanvas function here so that our canvas
  // will get re-painted in each next frame
  paintCanvas();

  // Call the function that will draw the balls using a loop
  for (var i = 0; i < particles.length; i++) {
    p = particles[i];
    p.draw();
  }

  //Finally call the update function
  update();
}

// Give every particle some life
function update() {

  // In this function, we are first going to update every
  // particle's position according to their velocities
  for (var i = 0; i < particles.length; i++) {
    p = particles[i];

    // Change the velocities
    p.x += p.vx;
    p.y += p.vy;

    // We don't want to make the particles leave the
    // area, so just change their position when they
    // touch the walls of the window
    if (p.x + p.radius > W)
    p.x = p.radius;else

    if (p.x - p.radius < 0) {
      p.x = W - p.radius;
    }

    if (p.y + p.radius > H)
    p.y = p.radius;else

    if (p.y - p.radius < 0) {
      p.y = H - p.radius;
    }

    // Now we need to make them attract each other
    // so first, we'll check the distance between
    // them and compare it to the minDist we have
    // already set

    // We will need another loop so that each
    // particle can be compared to every other particle
    // except itself
    for (var j = i + 1; j < particles.length; j++) {
      p2 = particles[j];
      distance(p, p2);
    }

  }
}

// Distance calculator between two particles
function distance(p1, p2) {
  var dist,
  dx = p1.x - p2.x,
  dy = p1.y - p2.y;

  dist = Math.sqrt(dx * dx + dy * dy);

  // Draw the line when distance is smaller
  // then the minimum distance
  if (dist <= minDist) {

    // Draw the line
    ctx.beginPath();
    ctx.strokeStyle = "rgba(255,255,255," + (1.2 - dist / minDist) + ")";
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.stroke();
    ctx.closePath();

    // Some acceleration for the partcles 
    // depending upon their distance
    var ax = dx / 2000,
    ay = dy / 2000;

    // Apply the acceleration on the particles
    p1.vx -= ax;
    p1.vy -= ay;

    p2.vx += ax;
    p2.vy += ay;
  }
}

// Start the main animation loop using requestAnimFrame
function animloop() {
  draw();
  requestAnimFrame(animloop);
}

animloop();
    </script>
</body>
</html>

8. By Louis Schuhmacher

Made by Louis Schuhmacher. Particle background with Mouse Follow Effect and Text. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
#particle {
  background: linear-gradient(to right, #fc354c, #0abfbc);
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  position: absolute;
  z-index: 2;
}

h1 {
  z-index: 45;
}
</style>
</head>
<body>
  <div id="particle">
  <h1>TEST</h1>
</div>
  <script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
      <script>
particlesJS("particle", {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800 } },


    "color": {
      "value": "#ffffff" },

    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000" },

      "polygon": {
        "nb_sides": 5 },

      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100 } },


    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false } },


    "size": {
      "value": 4,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false } },


    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1 },

    "move": {
      "enable": true,
      "speed": 4,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200 } } },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab" },

      "onclick": {
        "enable": true,
        "mode": "push" },

      "resize": true },

    "modes": {
      "grab": {
        "distance": 170.53621458328246,
        "line_linked": {
          "opacity": 1 } },


      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3 },

      "repulse": {
        "distance": 200,
        "duration": 0.4 },

      "push": {
        "particles_nb": 4 },

      "remove": {
        "particles_nb": 2 } } },
  "retina_detect": true });
    </script>
</body>
</html>

9. By Rob Kolb

Made by Rob Kolb. Bubble Particle Background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  background-image: radial-gradient(
    circle,
    #4ed9c9,
    #4dd4c4,
    #4bcfc0,
    #4acbbb,
    #48c6b7,
    #45c0b3,
    #42b9ae,
    #40b3aa,
    #3ca9a5,
    #3a9f9f,
    #399698,
    #388c91
  );
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>
</head>
<body>
  <div class="ip_first_block"></div>
      <script>
window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
  window.setTimeout(callback, 1000 / 60);
};

var canvas = document.createElement("canvas");

var container = document.querySelector(".ip_first_block");

container.appendChild(canvas);

var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var settings = {
  abstract: {
    emission_rate: 10,
    min_life: 25,
    life_range: 1,
    min_angle: 0,
    angle_range: 360,
    min_speed: 5,
    speed_range: 15,
    min_size: 0.25,
    size_range: 15,
    start_colours: [
    [255, 255, 255, 0.25],
    [70, 192, 177, 0.25],
    [255, 255, 255, 0.125]],

    end_colours: [
    [255, 255, 255, 0],
    [70, 192, 177, 0],
    [255, 255, 255, 0]],

    gravity: {
      x: 0,
      y: 0 },

    min_position: {
      x: -50,
      y: -50 },

    position_range: {
      x: 100,
      y: 100 } } };




var Particle = function (
x,
y,
angle,
speed,
life,
size,
start_colour,
colour_step)
{
  /* the particle's position */

  this.pos = {
    x: x || 0,
    y: y || 0 };


  /* set specified or default values */

  this.speed = speed || 5;

  this.life = life || 1;

  this.size = size || 2;

  this.lived = 0;

  /* the particle's velocity */

  var radians = angle * Math.PI / 180;

  this.vel = {
    x: Math.cos(radians) * speed,
    y: -Math.sin(radians) * speed };


  /* the particle's colour values */

  this.colour = start_colour;
  this.colour_step = colour_step;
};

var Emitter = function (x, y, settings) {
  /* the emitter's position */

  this.pos = {
    x: x,
    y: y };


  /* set specified values */

  this.settings = settings;

  /* How often the emitter needs to create a particle in milliseconds */

  this.emission_delay = 1000 / settings.emission_rate;

  /* we'll get to these later */

  this.last_update = 0;

  this.last_emission = 0;

  /* the emitter's particle objects */

  this.particles = [];

  /* particle position settings */

  this.position_vary = this.settings.position_range || false;

  this.min_position = this.settings.min_position || { x: 0, y: 0 };
};

Emitter.prototype.update = function () {
  /* set the last_update variable to now if it's the first update */

  if (!this.last_update) {
    this.last_update = Date.now();

    return;
  }

  /* get the current time */

  var time = Date.now();

  /* work out the milliseconds since the last update */

  var dt = time - this.last_update;

  /* add them to the milliseconds since the last particle emission */

  this.last_emission += dt;

  /* set last_update to now */

  this.last_update = time;

  /* check if we need to emit a new particle */

  if (this.last_emission > this.emission_delay) {
    /* find out how many particles we need to emit */

    var i = Math.floor(this.last_emission / this.emission_delay);

    /* subtract the appropriate amount of milliseconds from last_emission */

    this.last_emission -= i * this.emission_delay;

    while (i--) {
      /* calculate the particle's properties based on the emitter's settings */

      var start_colour = this.settings.start_colours[
      Math.floor(this.settings.start_colours.length * Math.random())];


      var end_colour = this.settings.end_colours[
      Math.floor(this.settings.end_colours.length * Math.random())];


      var life =
      this.settings.min_life + Math.random() * this.settings.life_range;

      var colour_step = [
      (end_colour[0] - start_colour[0]) / life /* red */,
      (end_colour[1] - start_colour[1]) / life /* green */,
      (end_colour[2] - start_colour[2]) / life /* blue */,
      (end_colour[3] - start_colour[3]) / life /* alpha */];


      this.particles.push(
      new Particle(
      this.min_position.x + (
      this.position_vary ? Math.random() * this.position_vary.x : 0),
      this.min_position.y + (
      this.position_vary ? Math.random() * this.position_vary.y : 0),
      this.settings.min_angle + Math.random() * this.settings.angle_range,
      this.settings.min_speed + Math.random() * this.settings.speed_range,
      life,
      this.settings.min_size + Math.random() * this.settings.size_range,
      start_colour.slice(),
      colour_step));


    }
  }

  /* convert dt to seconds */

  dt /= 1000;

  /* loop through the existing particles */

  var i = this.particles.length;

  while (i--) {
    var particle = this.particles[i];

    /* skip if the particle is dead */

    if (particle.dead) {
      /* remove the particle from the array */

      this.particles.splice(i, 1);

      continue;
    }

    /* add the seconds passed to the particle's life */

    particle.lived += dt;

    /* check if the particle should be dead */

    if (particle.lived >= particle.life) {
      particle.dead = true;

      continue;
    }

    /* calculate the particle's new position based on the forces multiplied by seconds passed */

    particle.vel.x += this.settings.gravity.x * dt;
    particle.vel.y += this.settings.gravity.y * dt;

    particle.pos.x += particle.vel.x * dt;
    particle.pos.y += particle.vel.y * dt;

    /* calculate new colour and draw the particle */

    particle.colour[0] += particle.colour_step[0] * dt;
    particle.colour[1] += particle.colour_step[1] * dt;
    particle.colour[2] += particle.colour_step[2] * dt;
    particle.colour[3] += particle.colour_step[3] * dt;

    ctx.fillStyle =
    "rgba(" +
    Math.round(particle.colour[0]) +
    "," +
    Math.round(particle.colour[1]) +
    "," +
    Math.round(particle.colour[2]) +
    "," +
    particle.colour[3] +
    ")";

    var x = this.pos.x + particle.pos.x;
    var y = this.pos.y + particle.pos.y;

    ctx.beginPath();
    ctx.arc(x, y, particle.size, 0, Math.PI * 2);
    ctx.shadowColor = "rgba(255, 255, 255, .375)";
    ctx.shadowBlur = 30;
    ctx.fill();
  }
};

var emitter = new Emitter(
canvas.width / 2,
canvas.height / 2,
settings.abstract);


function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  emitter.update();

  requestAnimFrame(loop);
}

function abstract() {
  emitter = new Emitter(canvas.width / 2, canvas.height / 2, settings.abstract);
}

loop();
    </script>
</body>
</html>

10. By vabhishek

Made by vabhishek. Particle Background Portfolio Page. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=La+Belle+Aurore'> 
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "La Belle Aurore", cursive;
  background-color: #000000;
  overflow: hidden;
}

.monospace {
  font-family: monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.sans-serif {
  font-family: sans-serif;
}

.container {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
}

.center-container {
  width: 60%;
  margin-left: 20%;
  margin-top: 10%;
  background: rgba(0, 0, 0, 0.5);
  padding-left: 1%;
}

@media only screen and (min-device-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .center-container {
    width: 80%;
    margin-left: 10%;
    margin-top: 25%;
  }
}

@media only screen and (min-device-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .center-container {
    width: 80%;
    margin-left: 10%;
    margin-top: 15%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait) {
  .center-container {
    width: 90%;
    margin-left: 5%;
    margin-top: 5%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
  .center-container {
    width: 90%;
    margin-left: 5%;
    margin-top: 5%;
  }
}

.center-container .hey-there {
  font-size: 35px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait) {
  .center-container .hey-there {
    font-size: 25px;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
  .center-container .hey-there {
    font-size: 25px;
  }
}

.center-container .heading {
  font-size: 35px;
  color: white;
  text-align: center;
  padding: 10px 0px 10px 0px;
  margin-top: 50px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait) {
  .center-container .heading {
    font-size: 25px;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
  .center-container .heading {
    font-size: 25px;
    margin-top: 25px;
  }
}

.center-container .links {
  width: 60%;
  margin-left: 20%;
}

@media only screen and (min-device-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .center-container .links {
    width: 80%;
    margin-left: 10%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait) {
  .center-container .links {
    width: 100%;
    margin-left: 0%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
  .center-container .links {
    width: 70%;
    margin-left: 15%;
  }
}

.center-container .links .link-div {
  width: 18%;
  display: inline-block;
  text-align: center;
}

.center-container .links .link-div .fa {
  font-size: 5em;
  color: white;
  transition: all 0.25s ease-in-out;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait) {
  .center-container .links .link-div .fa {
    font-size: 4em;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
  .center-container .links .link-div .fa {
    font-size: 4em;
  }
}

.center-container .links .link-div .fa:hover {
  font-size: 4em;
}
</style>
</head>
<body>
  <canvas id="mainCanvas" style="width:100%;"></canvas>   

    <div class="container">
      <div class="center-container">
        <div class="hey-there">
          <p>
            Hey there!
          </p>
          <p>
            &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;I'm Abhishek Vishwakarma. I'm a 
            Designer, Developer, Coder and Programmer.
          </p>
        </div>
        <div class="heading">
          Find me on .....
        </div>
        <div class="links">
          <div class="link-div">
            <a href="#" target="_blank">
              <i class="fa fa-twitter-square fa twitter"></i>
            </a>
          </div>

          <div class="link-div">
            <a href="#" target="_blank">
              <i class="fa fa-github-square fa github"></i>
            </a>
          </div>

          <div class="link-div">
            <a href="#" target="_blank">
              <i class="fa fa-instagram fa instagram"></i>
            </a>
          </div>

          <div class="link-div">
            <a href="#" target="_blank">
              <i class="fa fa-facebook-square fa  facebook"></i>
            </a>
          </div>

          <div class="link-div codepen-div">
            <a href="#" target="_blank">
              <i class="fa fa-codepen fa codepen"></i>          
            </a>
          </div>
        </div>
      </div>
    </div>
      <script>
(function () {
  function w() {
    h.globalCompositeOperation = "source-over";
    h.fillStyle = "rgba(8,8,12," + v + ")";
    h.fillRect(0, 0, f, k);
    h.globalCompositeOperation = "lighter";
    0.75 > v && (v += 0.05);
    D = s - x;
    E = t - y;
    x = s;
    y = t;
    for (
    var a = f / 1.15,
    l = f / 8,
    p = f / 2,
    r = Math.random,
    F = Math.abs,
    w = Math.sqrt,
    A = Math.cos,
    B = Math.sin,
    C = Math.atan2,
    G = 1350;
    G--;)

    {
      var e = H[G],
      g = e.x,
      c = e.y,
      d = e.vX,
      b = e.vY,
      q = g - s,
      m = c - t,
      n = w(q * q + m * m),
      m = C(m, q),
      q = A(m),
      m = B(m);
      if (z && n < p)
      var u = 14 * (1 - n / p),
      d = d + (q * u + 0.5 - r()),
      b = b + (m * u + 0.5 - r());
      n < a && (u = (1 - n / a) * f * 0.0014, d -= q * u, b -= m * u);
      n < l && (n = (1 - n / l) * f * 2.2e-4, d += D * n, b += E * n);
      d *= 0.96;
      b *= 0.96;
      F(d);
      F(b);
      g += d;
      c += b;
      g > f ? g -= f : 0 > g && (g = f + g);
      c > k ? c -= k : 0 > c && (c = k + c);
      e.vX = d;
      e.vY = b;
      e.x = g;
      e.y = c;
      d = e;
      b = g / f * Math.PI * 2;
      c = c / k * Math.PI;
      b = {
        theta: b,
        phi: c,
        x: -100 * Math.sin(c) * Math.sin(b),
        y: -100 * Math.cos(c),
        z: -100 * Math.sin(c) * Math.cos(b) };

      d.pos3D = b;
      e.pos3D.z -= 200;
      -299 > e.pos3D.z || (
      d = 300 / (300 + e.pos3D.z), b = e.pos3D.x * d + f / 2, c =
      e.pos3D.y * d + k / 2, h.fillStyle = e.color, h.beginPath(), h.arc(
      b,
      c,
      d,
      0,
      I,
      !0),
      h.closePath(), h.fill());
    }
  }
  function r(a) {
    f = document.documentElement.clientWidth;
    k = document.documentElement.clientHeight;
    p.width = f;
    p.height = k;
  }
  function A(a) {
    a = a ? a : window.event;
    s = x = a.pageX;
    t = y = a.pageY;
    document.onmousemove = B;
  }
  function B(a) {
    a = a ? a : window.event;
    s = a.pageX;
    t = a.pageY;
  }
  function C(a) {
    z = !0;
    return !1;
  }
  function J(a) {
    return z = !1;
  }
  function K() {
    this.color =
    "rgb(" +
    Math.floor(255 * Math.random()) +
    "," +
    Math.floor(255 * Math.random()) +
    "," +
    Math.floor(255 * Math.random()) +
    ")";
    this.size = this.vY = this.vX = this.x = this.y = 0;
    this.pos3D = { x: 0, y: 0, z: 100 };
  }
  var p,
  h,
  f = 1e3,
  k = 560,
  H = [],
  I = 2 * Math.PI,
  v = 0,
  s,
  t,
  D = 0,
  E = 0,
  x = 0,
  y = 0,
  z = !1;
  window.onload = function () {
    p = document.getElementById("mainCanvas");
    if (p.getContext) {
      document.getElementById("outer");
      document.getElementById("canvasContainer");
      h = p.getContext("2d");
      window.moveTo(0, 0);
      window.resizeTo(screen.width, screen.height);
      r(null);
      for (var a = 1350; a--;) {
        var l = new K();
        l.x = 0.5 * f;
        l.y = 0.5 * k;
        l.vX = Math.cos(a) * Math.random() * 40;
        l.vY = Math.sin(a) * Math.random() * 20;
        l.size = 2;
        H[a] = l;
      }
      document.onmousedown = C;
      document.onmouseup = J;
      document.onmousemove = A;
      window.onresize = r;
      r(null);
      setInterval(w, 33);
    }
  };
})();
    </script>
</body>
</html>

11. By Imagiminds

Made by Imagiminds. Particle Background with Text Animation and Logo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
*{
  margin:0;
  padding:0;
}
/*
  Panel in center
*/
.panel {
  position: absolute;
  z-index: 10;
  width: 420px;
  height: 300px;
  color:white;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -210px;
  padding: 20px;
  border-radius: 4px;
  box-sizing: border-box;
  z-index: 100;
}


/* Typing Effect */

.aayushi {
	/* height: 100vh; */
	display: flex;
	justify-content: center;
	align-items: center;
  }
   
  .aayushi p {
	font-size: 1.5rem;
	/* padding: 0.5rem; */
	font-weight: bold;
	letter-spacing: 0.1rem;
	text-align: center;
	overflow: hidden;
  }
  .aayushi p span.typed-text {
	font-weight: bold;
	color: #dd7732;
  }
  .aayushi p span.cursor {
	display: inline-block;
	background-color: white;
	/* margin-left: 0.1rem; */
	width: 3px;
	animation: blink 1s infinite;
  }
  .aayushi p span.cursor.typing {
	animation: none;
  }
  @keyframes blink {
	0%  { background-color: yellow; }
	49% { background-color: yellow; }
	50% { background-color: transparent; }
	99% { background-color: transparent; }
	100%  { background-color: yellow; }
  }


canvas{ display: block; vertical-align: bottom; }
#particles-js{ position:absolute; width: 100%; height: 100%; background-color: #252428; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }
</style>
</head>
<body>
  <main id="particles-js">

            <section class="panel">
                <h1 align="center"><img src="https://imagiminds.yolasite.com/ws/resized-images/47a4ad6d4890404d860bec2a95dee371/imagiminds-new.png" height=100px width=100px></h1>
                <h2 align="center">Welcome to Imagiminds</h2>
                <div class="aayushi">
                  <p>An Organisation  <span class="typed-text"></span><span class="cursor">&nbsp;</span></p>
                </div>
            </section>
    
          </main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js'></script>
      <script>
particlesJS("particles-js", { "particles": { "number": { "value": 100, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 1, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 0.4890406785639845, "random": true, "anim": { "enable": true, "speed": 2.355023915673901, "opacity_min": 0.10557003759917487, "sync": true } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true });

//typing effect
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["to encourage girls take up careers in STEM fields", "to provide them with opportunities to learn", "which help your child to learn the new age skills in a more effective way", "which teach coding while playing games", "which conducts virtual high school experiments", "which provide girls a platform to unleash their talent."];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } else
  {
    cursorSpan.classList.remove("typing");
    setTimeout(erase, newTextDelay);
  }
}

function erase() {
  if (charIndex > 0) {
    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } else
  {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if (textArrayIndex >= textArray.length) textArrayIndex = 0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function () {// On DOM Load initiate the effect
  if (textArray.length) setTimeout(type, newTextDelay + 250);
});
    </script>
</body>
</html>

12. By PHPH

Made by PHPH. Particle background animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>
</head>
<body>
  <div id="canvas"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/72/three.min.js'></script>
      <script>
var camera, scene, renderer, particles, particle, material, particleCount, points, texture;
var xSpeed, ySpeed;
xSpeed = 0.0005;
ySpeed = 0.001;
var winWidth, winHeight;
winWidth = window.innerWidth;
winHeight = window.innerHeight;

init();
animate();

function init() {
  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2('#222', 0.001);

  camera = new THREE.PerspectiveCamera(75, winWidth / winHeight, 1, 1000);
  camera.position.z = 500;

  material = new THREE.PointsMaterial({
    color: 0xffffff,
    size: 3,
    transparent: true,
    blending: THREE.AdditiveBlending });


  particleCount = 15000;
  particles = new THREE.Geometry();

  for (var i = 0; i < particleCount; i++) {
    var px = Math.random() * 2000 - 1000;
    var py = Math.random() * 2000 - 1000;
    var pz = Math.random() * 2000 - 1000;
    particle = new THREE.Vector3(px, py, pz);
    particle.velocity = new THREE.Vector3(0, Math.random(), 0);
    particles.vertices.push(particle);
  }

  points = new THREE.Points(particles, material);
  points.sortParticles = true;
  scene.add(points);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(winWidth, winHeight);
  renderer.setClearColor('#222', 1);
  document.getElementById('canvas').appendChild(renderer.domElement);
}

function animate() {
  requestAnimationFrame(animate);

  scene.rotation.y += xSpeed;

  var i = particleCount;
  while (i--) {
    var particle = particles.vertices[i];

    if (particle.y > 1000) {
      particle.y = -1000;
      particle.velocity.y = Math.random();
    }
    particle.velocity.y += Math.random() * ySpeed;

    particle.add(particle.velocity);
  }
  points.geometry.verticesNeedUpdate = true;

  render();
}

function render() {
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}
    </script>
</body>
</html>