25+ JavaScript Background Effects - Free Code + Demos

Lightweight, High Performance Particles in Canvas

Iterate through every element on a page, colouring them in.

CodePen Challenge B & W & A (design something with only Black, White, and A's) Credits: https://css-doodle.com/ https://codepen.io/akobashikawa/pen/rZRrQN (random google fonts)

Display a single background texture across several differently coloured divs.

Move your mouse, or swipe on a touch device, to navigate through the stars.

Enjoy this shiny Crystal Parallax! Turn Glow Off for better performance (JS Line 35)

Labyrinthine creations made from Tunisia and inspired by my wandering experience there. Force fields and randomness. This one is hundreds of me being dragged around in Tunis' souk by a random dude who wanted to show me something. Particles never hit each other. A spot becomes free after ...

Read More

I've tried to use the SVG element to create an animated pattern. This is as far as I've come but unfortunately, the animations aren't very performant, so I've added a toggle to turn them on/off. Parallax stars by https://codepen.io/saransh/pen/BKJun

The ash falls as I look up in this burned out world.

Click anywhere. Built with @juliangarnier's anime.js. ...Also basically using his fireworks, which are pretty rad (and available here)

A ultra simple login screen on a calm breezy day,

I got the evening off and I decided to rebuild my personal page. Will probably be adding some things to it, but I will try to keep it as clean as possible.

<3

I was away for a while seeking for inspiration =D Now i am back with this little simple pen.

Best viewed in Chrome! Firefox doesn't work unfortunately due to a known issue. Abstract sea waves. Made by animating lots and lots of circles that animate using sinus and cosinus values!