HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only achieve extraordinary web animation by using Flash and Java Applet. Now it’s possible to create insane effects and crazy animations with scripting and render it on the browser.

A particle system is a technique used to simulate a variety of special visual effects like sparks, dust, smoke, fire, explosions, rain, stars, falling snow, glowing trails, and many others. Basically, a particle system consists of emitters and the particles themselves. The basic idea behind particle system is very simple – by drawing lots of very small squares or circles, which behave individually according to some rules, you can generate a visual effect where the sum of the parts is much more than the parts separately. Here are some amazing particle effect animation tutorials and examples using HTML5 canvas to help you create beautiful visual effects, such as explosions, lasers, fire, and so on.

Animation Particles Text Ad

Create special effect with bezierCurveTo effect of movement of text, circle with special effect images effect of semicircular upper / lower line corner effect effect of straight line with a few modifications you can create images with special effects spectacular OnClick Block animation.

Particle effects are easy

Learn how to use this simple yet powerful technique to build your own stunning visuals.

Physics for the lazy

Add some basic physics to create a particle-based water fountain.

HTML5 Canvas Particles Web Matrix

The main concept here is that there are some particles on the canvas which start attracting other when they come close to each other. Also, they’ll start drawing lines between them as they come closer to each other and the opacity of the lines depends upon the distance between them.

HTML5 Canvas Particle Animation

Holy moly, that looks amazing. Not only is the design great and the colors are just about perfect, but those little sparkles are crazy!

Make a particle system in HTML5 canvas

The particles are basically made of simple circles with radial gradients and random properties for velocity, size and color.

An Introduction to Particle Systems/Generators using the HTML5 Canvas object

In its most elemental form, particle systems are composed by two main objects: A particle object, which will represent every individual particle, and a generator, which will generate particles themselves.

Make an explosive firework display

Creating fireworks using the HTML 5 canvas: both awesome and fun to do

Making 100,000 Stars

Michael Chang will outline the discovery process, share some programming techniques, and finish with some thoughts for future improvement.

Liquid Particles

HTML5 demo using Canvas and JavaScript, 500 particles to play around with.

Magnetic

Particles orbit around magnets which can be dragged around to create currents. The HTML5 canvas element is used for visual output.

30,000 Particles

A study creating performant particles with Canvas 2D.

Trail

JavaScript controlled particles follow the mouse generating a smooth pattern. The HTML5 canvas element is used for visual output.

Text Particles

Some cool canvas pixel manipulation.

Ionic

Super awesome particle animation code.