Posted on

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/

Posted on

Snap Animation States

There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you’re interested in learning more about the merits of using inline SVG, I recommend reading Inline SVG vs Icon Fonts. With ever increasing browser support, there’s never been a better time to start working with SVGs. Snap Animation States is a JavaScript plugin built around Snap.svg to help create and extend icon libraries with …

Snap Animation States is a post from CSS-Tricks

Link: https://css-tricks.com/snap-animation-states/

Posted on

The Many Tools for Shape Morphing

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.

SMIL
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

Link: https://css-tricks.com/many-tools-shape-morphing/

Posted on

Livecoding: A Map of Global Migrations, Part 3

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.

Link: https://dzone.com/articles/livecoding-a-map-of-global-migrations-part-3?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Posted on

Sketch Now Replicates Inside & Outside Stroke Alignment

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

Link: https://medium.com/sketch-app-sources/sketchs-brilliant-new-way-to-export-borders-as-svg-bc8fc5f6d5b1

Posted on

Papercons

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.
They:

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

…

Papercons is a post from CSS-Tricks

Link: https://medium.com/dropbox-design/do-you-know-where-your-icons-are-31f48a99e049

Posted on

Pong with SVG.js

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.
Getting…

Pong with SVG.js is a post from CSS-Tricks

Link: https://css-tricks.com/pong-svg-js/

Posted on

Book Release: SVG Animations

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.

Foreword
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

Link: https://css-tricks.com/book-release-svg-animations/

Posted on

Randomizing SVG Shapes

SVG shapes are all built from numbers. Obvious, perhaps, but also, I’m not sure we take as much advantage of that as we could with inline . For example, it’s pretty easy to generate a new pseudo-random number in JavaScript:
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max – min + 1) + min);
}
Now imagine a bunch of variables set to random numbers, and using ES6 template literals to stitch them together:
let newPoints = `${x1},${y1} {x2},${y2} …

Randomizing SVG Shapes is a post from CSS-Tricks

Link: http://mediatemple.net/blog/tips/randomizing-svg-shapes/

Posted on

Tools to Visualize and Edit SVG Paths (Kinda!)

It was brought up at the SVG Summit the other day, wouldn’t it be nice when working with SVG to be able to work with it both ways at once?

See and edit the code, and see the results visually
See and edit the visual shapes, and see the code change

There might not be the perfect one true tool, but there are certainly some ideas getting there!

Anthony Dugois’s SVG Path Builder
I’d embed the Pen here, but you …

Tools to Visualize and Edit SVG Paths (Kinda!) is a post from CSS-Tricks

Link: https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/