Dirk Weber is a designer and frontend developer with a passion for everything related to type on the web. He gained fame for his translation of “Fifty Shades of Grey” into Dothraki and for his world record in recreating the complete 1F600 - 1F64F UnicodeBlock as latte art in under 3 minutes.
What exactly is a displacement filter? In this article, Dirk Weber will be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, Dirk has divided the article into three parts in which you’ll be exploring how the feDisplacementMap works, methods to create fancy displacement maps in SVG, and methods to animate the filter and create dramatic visual effects.
Read more…
There is a gap between pure CSS layout and custom design elements created in software such as Photoshop or Illustrator. Sophisticated SVG filters give us more independence from third-party design tools and bridge this gap by enabling us to create visual styles directly in the browser.Wouldn’t it be great if we could style letters the same way we usually style text with CSS? In this article Dirk Weber will show you how SVG filters help you to create playful, decorative web typography.
Read more…
