Moving Snakes Using HTML5 Canvas

Experiment with HTML5 Canvas Particles to create a beautiful Moving Snakes effects with Particle Trails.

HTML Snippet

You might also like

CSS Shapes Forest Collection Spring Summer 2020

October 11, 2020

CSS Button Concept for Remove and Success

August 21, 2019

<h1><span>W3</span> <span>Tweaks</span></h1>

CSS Code

::selection {   background-color: #ffffff;   color: #000000; } body {   margin: 0;   font-family: "Righteous", sans-serif;   background-color: #06094a; } h1 {   color: #ffffff;   text-transform: uppercase;   font-size: 72px;   text-align: center;   position: fixed;   z-index: 500;   left: 0;   right: 0;   top: 50%;   margin: -36px 0 0 0;   padding: 0;   line-height: 0.9;   mix-blend-mode: exclusion; } h1 span:nth-child(1) {   color: #ff3939; } h1 span:nth-child(2) {   color: #badcff; } @media screen and (max-width: 568px) {   h1 {     margin: -64px 0 0 0;   } }

JavaScript

//Globals var vWidth = window.innerWidth; var vHeight = window.innerHeight; var cns = document.createElement("canvas"); cns.width = vWidth; cns.height = vHeight; document.body.appendChild(cns); var ctx = cns.getContext("2d"); ctx.fillStyle = "rgba(6,9,74,1)"; ctx.fillRect(0, 0, vWidth, vHeight);  //Particles var particles = new Array(); var Particle = function() {   this.x =     Math.round(Math.random() * vWidth) - Math.round(Math.random() * vWidth);   this.y =     Math.round(Math.random() * vHeight) - Math.round(Math.random() * vHeight);   this.hue =     "#" +     Math.random()       .toString(16)       .substr(2, 6);   this.directionX = "left";   this.directionY = "bottom"; }; for (var i = 0; i < 1000; i++) {   particles[i] = new Particle(); }  //Paint var paint = param => {   ctx.beginPath();   ctx.lineWidth = "2";   ctx.strokeStyle = particles[param].hue;   ctx.moveTo(particles[param].x, particles[param].y);   if (particles[param].directionY == "bottom") {     particles[param].y = particles[param].y + Math.round(Math.random() * 2);     if (particles[param].y > vHeight) {       particles[param].directionY = "top";     }   }   if (particles[param].directionY == "top") {     particles[param].y = particles[param].y - Math.round(Math.random() * 2);     if (particles[param].y < 0) {       particles[param].directionY = "bottom";     }   }    if (particles[param].directionX == "left") {     particles[param].x = particles[param].x + Math.round(Math.random() * 2);     if (particles[param].x > vWidth) {       particles[param].directionX = "right";     }   }   if (particles[param].directionX == "right") {     particles[param].x = particles[param].x - Math.round(Math.random() * 2);     if (particles[param].x < 0) {       particles[param].directionX = "left";     }   }    ctx.lineTo(particles[param].x, particles[param].y);   ctx.closePath;   ctx.stroke(); };  // Frames var frame = () => {   ctx.fillStyle = "rgba(6,9,74,.20)";   ctx.fillRect(0, 0, vWidth, vHeight);   for (var j = 0; j < 1000; j++) {     paint(j);   }   window.requestAnimationFrame(frame); }; window.requestAnimationFrame(frame);

Preview

See the Pen Moving Snakes by Nitish Khagwal (@nitishkmrk) on CodePen.