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
To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages.
The original, native technology for shape morphing is SMIL. We have both a …
The Many Tools for Shape Morphing is a post from CSS-Tricks
Since finishing Part 1 and Part 2, we’ve built a zoomable pannable map with React and D3. We also added animation to our migration curves. Now people can see what they mean.
See? It zooms and it pans and the circles follow their curves. Just like the color, the amount of circles on each line signifies migration intensity.
I was just bemoaning strokes the other week:
And that’s the trouble with text-stroke in CSS: you have no choice. It’s center-aligned stroke only. Either of the other options [outside-aligned or inside-aligned], arguably, would have been more useful.
There still is no solution for text-stroke, but SVG has the exact same problem. It’s not quite as design-ruining with SVG, since you can (and designers have been) design with center aligned strokes in mind with their vector art. Still, I’d …
Sketch Now Replicates Inside & Outside Stroke Alignment is a post from CSS-Tricks
Bobby Grace, on the Dropbox Paper team:
On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for inserting icons.
Use a single Sketch file, checked into the repo, as the place to design and house all the icons.
Use gulp-sketch to extract them all individually.
The build script continues by optimizing them
Everybody loves the vintage game Pong, right? We sure do. What’s more fun? Building it yourself!
That’s why we decided to create one with SVG.js – to highlight some aspects of our library. It might seem like a complex idea for a small tutorial, but as you’ll see, it’s simpler than it sounds. Let’s dive into it!
Here’s the finished product:
See the Pen Fully functional Pong game with effects by Wout Fierens (@wout) on CodePen.
Our own Sarah Drasner has published a book! You can grab it from the O’Reilly website or Amazon.
If you need a little convincing, I figured I would post the foreword I wrote for the book here, then you can continue reading over on the O’Reilly site.
Have you ever learned a new word, then had the opportunity to use that word in the perfect situation come up a number of times that week? That’s what it feels …
Book Release: SVG Animations is a post from CSS-Tricks