A Bloody Awesome Effect

Normally when someone builds something in canvas, as soon as they set up the animation frame rate, they immediately set the canvas to clear between each frame. But that isn’t required. In fact, the default of canvas is to not clear. And that’s what’s going on here. The effect is bloody and awesome.

See the Pen A Bloody Mess by Rob Glazebrook (@rglazebrook) on CodePen.

Semi-transparent circles are moving from the top of the screen to the bottom. But the canvas isn’t being cleared between each frame. Which means we’re left with blood-red trails moving down the screen ad infinitum. Reminds me of something out of Dexter.

Play around with the demo and see what else you can come up with that capitalizes on this technique.