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

Animate Calligraphy with SVG

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?

Read article
Article

Using Custom Fonts With SVG in an Image Tag

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

Article

What is SVG good for?

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

Article

Responsive Knockout Text With Looping Video

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

Article

Creating a Panning Effect for SVG

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

Article

How to Create a Component Library From SVG Illustrations

I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components.… Read article

Link

Animated SVG Radial Progress Bars

Article

Scooped Corners in 2018

When I saw Chris' article on notched boxes, I remembered that I got a challenge a while ago to CSS a design like it, but with rounded, scooped corners instead. So, let's see how we can do it that way instead and expand it to multiple corners while being mindful of browser support.
Article

CSS Techniques and Effects for Knockout Text

Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It’s appealing because it opens up typographic styles that we don’t get out of traditional CSS properties, like color.

While we’ve seen a number of ways to accomplish knockout text in the past, there are some modern CSS properties we can use now and even enhance the … Read article

Article

Using CSS Clip Path to Create Interactive Effects

Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path. We will discuss how to do the cutting and how we can use these cut-out parts to create some interesting effects, combining these cut-out parts with the original image.… Read article

icon-link icon-logo-star icon-search icon-star