Abstract Painting with CSS Filters

CSS Filters can do more than you knew.

CSS Filters let web developers easily apply beautiful visual filter effects to any elements on a web page. In modern browsers like Google Chrome these filter effects are hardware accelerated for speed, allowing them to be applied effectively to animated elements like WebGL, <video> tags, and Canvas2D. CSS Filters' simplicity allow them to be applied with just one line of CSS!

Draw
Start by selecting a tool from the right and start drawing on the canvas with your mouse.
Explore
You can drag effects from the effects bar to apply different effects to elements.
Share
Click on the share button to share your creation with your friends!
Painting Tools
Paper Cutter
A WebGL-based tool for creating paper cut-out shapes from your paths. This tool works best with closed, overlapping shapes.
Tri Line
Another WebGL-based tool that creates noisy 3D geometry based on drawn paths.
Concentric Pen
This tool operates on the Canvas Element by mapping paths to concentric circles similar to a rainbow pattern, depending on the the type of stroke (angle, length, shape).
Geo Shaper
This tool creates animated, geometric, SVG elements. It only uses the size of the area drawn to create the shape.
Move
Allows dragging and selecting of objects.
Delete
Clicking on an element with this tool selected will delete it.
CSS:
Palette: None
Stuart Davis
Frank Stella
Lewitt
Black & White
Mondrian
Rainbow
Background: None
Paper
Wood
Light
Dark
Video (Ammon Rost)
Effects: Drag To Apply
No Filter
Dostoevsky
Plasma
Blur
Neon
Architect
Pastels
AirBrush
Haze
Benglis
X-Ray