Skip to content
Bokeh Animation with JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Bokeh Animation with JavaScript

I've been trying to recreate the bokeh effect sometimes seen in photography, using CSS and JavaScript - you can see the results below.


Light sources are generated randomly, and are assigned a position, velocity and acceleration within a simulated 3-dimensional space. The 'distance' of each light source determines its brightness, acuity and precise colour, giving the illusion of depth. Sometimes the lights exhibit a slight flicker, to simulate the sources passing briefly behind an opaque body that obscures them.

You can see the animation in action on the project home page - pick one of the Presets, and then experiment with the various sliders to change the effect (Focal Distance is my favourite). If you find one that you like, then hit full-screen button in the bottom-right corner!

You can’t perform that action at this time.