Articles Tagged SVG

Maxim Leyzerovich created the marching ants effect with some delectably simple SVG.… Read article

This is a follow up to my previous post looking into clip paths. Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We’re going to take things a step further in this post and look at different examples, discuss alternative techniques, and consider how to approach our work to be cross-browser compatible.… Read article

Here's a little example that Jeremy Keith used to use in his talks. It's stuck with me as one of the coolest examples of progressive enhancement and Technology Being Cool^TM around.

There is this musical notation format called abc. They don't capitalize it. Kinda like npm, which I guess makes sense as it isn't an acronym. But it is the name of something so it's super awkward. Ughakdhk. Anyway.

The format itself is really cool. It's super … Read article

A reader wrote in to tell me we should update our articles about SVG <use></use> elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says:

That's pretty strong language, hence the reader's warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though.… Read article

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this:

I have something that is sort of a line, but because it has varying brush widths, in SVG it is defined as the fill of a path.

How can this "brush" be animated?

When we produce a PNG image, we use an <img /> tag or a CSS background, and that's about it. It is dead simple and guaranteed to work.… Read article

Y'all probably wouldn't be surprised if I told you it's pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I'm a fan of just inlining those suckers, particularly when they are pretty simple.

But what else?… Read article

Here’s an idea! Let’s make an an HTML <video></video> play inside the shape of some letters. Like "Knockout Text" except instead of an image behind, it’s video. … Read article

Earlier this month on the Animation at Work Slack, we had a discussion about finding a way to let users pan inside an SVG.… Read article