SVG Motion blur demo's
Demo of motion blur simulation using SVG filters and JavaScript. Click a row (or use the buttons) to move the block and see the effect. Scrolling will also show the effect for dynamic blur (the middle block).
No blur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus leo. Nunc gravida tellus sagittis eros ullamcorper, eu sollicitudin velit feugiat. Proin at faucibus metus. Aenean erat tortor, laoreet sed arcu eu, sollicitudin sollicitudin quam. Proin sagittis tincidunt sagittis. Nulla sed quam lorem.
Motion blur (dynamic)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus leo. Nunc gravida tellus sagittis eros ullamcorper, eu sollicitudin velit feugiat. Proin at faucibus metus. Aenean erat tortor, laoreet sed arcu eu, sollicitudin sollicitudin quam. Proin sagittis tincidunt sagittis. Nulla sed quam lorem.
Motion blur ('faux')
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus leo. Nunc gravida tellus sagittis eros ullamcorper, eu sollicitudin velit feugiat. Proin at faucibus metus. Aenean erat tortor, laoreet sed arcu eu, sollicitudin sollicitudin quam. Proin sagittis tincidunt sagittis. Nulla sed quam lorem.
Motion blur ('faux')
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus leo. Nunc gravida tellus sagittis eros ullamcorper, eu sollicitudin velit feugiat. Proin at faucibus metus. Aenean erat tortor, laoreet sed arcu eu, sollicitudin sollicitudin quam. Proin sagittis tincidunt sagittis. Nulla sed quam lorem.