Simple Patterns for Separation (Better Than Color Alone)

Color is pretty good for separating things. That’s what your basic pie chart is, isn’t it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination.

Patrick Dillon tackled the Pie Chart thing
Enhancing Charts With SVG Patterns:
When one of the slices is filled with something more than color, it’s easier to figure out [who the …

Simple Patterns for Separation (Better Than Color Alone) is a post from CSS-Tricks

Link: https://css-tricks.com/simple-patterns-for-separation/

Discover The Fatwigoo

When you use a bit of inline and you don’t set height and width, but you do set a viewBox, that’s a fitwigoo. I love the name.
The problem with fatwigoo’s is that the <svg> will size itself like a block-level element, rendering enormously until the CSS comes in and (likely) has sizing rules to size it into place.
It’s one of those things where if you develop with pretty fast internet, you might not ever …

Discover The Fatwigoo is a post from CSS-Tricks

Link: http://www.otsukare.info/2017/11/02/fatwigoo

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I’ve shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I’ll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one.

The last example showcased making the shape …

Creating a Star to Heart Animation with SVG and Vanilla JavaScript is a post from CSS-Tricks

Link: https://css-tricks.com/creating-star-heart-animation-svg-vanilla-javascript/

When Design Becomes Part of the Code Workflow

I recently did an experiment where I created the same vector illustration in three different applications, exported the illustration as SVG in each application, then wrote a post comparing the exported code.
While I loved the banter and insights that came in the comments, I was surprised that the bulk of conversation was centered on the file size of the compiled SVG.

I wasn’t surprised because performance and SVG do not go hand-in-hand or that performance isn’t the sort of …

When Design Becomes Part of the Code Workflow is a post from CSS-Tricks

Link: https://css-tricks.com/design-becomes-part-code-workflow/

Saving SVG with Space Around It from Illustrator

There are a number of ways to export graphics from Illustrator. Some of them aren’t particulary useful (Save As), some of them don’t support SVG (Export for Web), some of them produce good output but have limited options that don’t allow preserving space around the art (Export As). The only way to output SVG preserving the space around the art is export the artboard itself, which is only an option under the Export for Screens area.

Saving SVG with Space Around It from Illustrator is a post from CSS-Tricks

Link: https://css-tricks.com/saving-svg-space-around-illustrator/

One Illustration, Three SVG outputs

Let’s say we draw the same vector graphic in different design applications and export each one as SVG for use on the web. Should we expect the same SVG file from each application?

On the one hand, we might expect each file to be the same because of our past history with exporting images. Applications have typically been consistent at saving JPGs, PNGs, and GIFs with perhaps minor differences to the overall file size.
On the other hand, SVG is …

One Illustration, Three SVG outputs is a post from CSS-Tricks

Link: https://css-tricks.com/one-illustration-three-svg-outputs/

Glue Cross-Browser Responsive Irregular Images with Sticky Tape

I recently came across this Atlas of Makers by Vasilis van Gemert. Its fun and quirky appearance made me look under the hood and it was certainly worth it! What I discovered is that it was actually built making use of really cool features that so many articles and talks have been written about over the past few years, but somehow don’t get used that much in the wild – the likes of CSS Grid, custom properties, blend modes, …

Glue Cross-Browser Responsive Irregular Images with Sticky Tape is a post from CSS-Tricks

Link: https://css-tricks.com/glue-cross-browser-responsive-irregular-images-sticky-tape/

If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs?

Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of might have a <title>, and you might be appying IDs to both of those elements for various reasons.

One of those reasons might be because you just want an ID on the icon to uniquely identify it for JavaScript or styling purposes.
Another of those reasons is that for accessibility, it’s recommended you use aria-labelledby to connect the id and title, …

If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs? is a post from CSS-Tricks

Link: https://css-tricks.com/youre-inlining-svg-icons-deal-unique-titles-ids/

Creating Yin and Yang Loaders On the Web

I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you through the process of building these demos.

Before anything else, this is the animation we’re trying to achieve here:
The desired result:…

Creating Yin and Yang Loaders On the Web is a post from CSS-Tricks

Link: https://css-tricks.com/creating-yin-yang-loaders-web/