Category: SVG

Stroke Text CSS: 📕 The Definitive Guide

In this tutorial I will show you how to create the stroke text CSS effect. Before we go into the HTML and CSS code, if you only need to create a stroke text image, check out this tutorial and learn how to outline text in Photoshop. Or, if you don’t have Photoshop, you can use […]
Read more
Creating a Pencil Effect in SVG

Creating a Pencil Effect in SVG

Dragons Abound produces maps in SVG, which is a vector graphics format.  Vector graphics have a lot of features (such as lossless zoom) that are nice for maps.  And vector graphics are good for producing crisp, well-defined lines like an ink stroke: On the other hand, vector graphics are not very good at producing textures with […]
Read more

Emojis as Favicons | CSS-Tricks

Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck an emoji inside an SVG element and use that as the favicon. Now that all modern browsers support SVG favicons, here's how to turn any emoji into […]
Read more
How We Created a Static Site That Generates Tartan Patterns in SVG

How We Created a Static Site That Generates Tartan Patterns in SVG

Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan patterns (as SVG and PNG files), taking care to filter out any that have explicit usage restrictions. The idea was cooked up by Sylvain Guizard during our summer holidays in Scotland. At the very beginning, […]
Read more
X