Skip to main content
CSS is fun and cool and I like it.

Going Beyond Automatic SVG Compression With the “use” Element

If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only few seconds and reduces your file size a lot. But if you need to use your SVG inline to animate or interact with the code, there’s still a lot you can do about code legibility.

Reusing content with SVG’s <use> is not always an option, but when … Read article “Going Beyond Automatic SVG Compression With the “use” Element”


Simple Image Placeholders with SVG


A Trick That Makes Drawing SVG Lines Way Easier

When drawing lines with SVG, you often have a <path></path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that the entire stroked path appears hidden initially. Then you animate the stroke-offset back to 0 so you can watch it “draw” the shape.

Figuring out the length of the path is the trick, which fortunately you can do in JavaScript by selecting the … Read article “A Trick That Makes Drawing SVG Lines Way Easier”


Animate Text on Scroll

We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.… Read article “Animate Text on Scroll”


How to Animate on the Web With GreenSock

There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: using GreenSock.… Read article “How to Animate on the Web With GreenSock”


A CSS Tribute to SVG


Dark Mode Favicons

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg"/>). And you can embed CSS within an SVG with a <style></style> element. That CSS can use a perfers-color-scheme media query, and as a result, a favicon that supports dark mode!… Read article “Dark Mode Favicons”


The Amazingly Useful Tools from Yoksel

I find myself web searching for some tool by Yoksel at least every month. I figured I’d list out some of my favorites here in case you aren’t aware of them.… Read article “The Amazingly Useful Tools from Yoksel”


When to Use SVG vs. When to Use Canvas

SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.

  • A little flat-color icon? That’s clearly SVG territory.
  • An interactive console-like game? That’s clearly canvas territory.

I know we didn’t cover why yet, but I hope that will become clear as we dig into it.… Read article “When to Use SVG vs. When to Use Canvas”


A Snippet to See all SVGs in a Sprite

I think of an SVG sprite as this:

<svg display="none">
  <symbol id="icon-one"> ... </symbol><symbol>
  </symbol><symbol id="icon-two"> ... </symbol><symbol>
  </symbol><symbol id="icon-three"> ... </symbol><symbol>

I was long a fan of that approach for icon systems (<use></use>-ing them as needed), but I favor including the SVGs directly as needed these days. Still, sprites are fine, and fairly popular.

What if you have a sprite, and you wanna see what’s in it?… Read article “A Snippet to See all SVGs in a Sprite”