SVG in CSS

A Work in Progress

Motivation

Firefox supports using SVG filters in HTML via CSS. This is a test page. Various filters are applied to <div> elements that wrap a header and image.

Unfiltered

A street seen with an SVG filter applied

Saturate (saturate=0.5)

A street seen with an SVG filter applied

Hue Rotate (180 degress)

A street seen with an SVG filter applied

Red

A street seen with an SVG filter applied

Invert

A street seen with an SVG filter applied

Misaligned

A street seen with an SVG filter applied