SVG Circle Decomposition To Paths

18 min read
No meows just yet

March 22, 2019 — This article will show you how to turn SVG circles into paths which you can use in animation and text paths, as well as how to turn paths into circles. Once you’ve figured out how it all works, you’ll ... Read More…

30 more articles

Val Head wrote

Including Animation In Your Design System

February 21, 2019 — It’s important to understand how animation can be used (or not used) in your design system. In this article, Val Head explains how you can help ensure that your brand is using animation consistently and effectively while also helping your team work faster. Read More…

Marina Ferreira wrote

HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript

January 4, 2019 — In this article, you can learn how to build the animated note display from the Awwwards website. It discusses the HTML5 SVG circle element, its stroke properties, and how to animate them with CSS variables and Vanilla JavaScript. Read More…

Nick Babich wrote

Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides

October 9, 2018 — Good functional animation makes a landing page not just more appealing, but also more usable. When done correctly, animation can turn a landing page from a sequence of sections into a carefully choreographed, memorable experience. Meet Slides, a framework that will help you … Read More…

Simon Schmid wrote

Introduction To Animation And The iMessage App Store With Shruggie

September 10, 2018 — Learn about the basics of animation in After Effects by animating one of the most famous type characters and the state of the iMessage App Store in 2018 when it comes to stickers. Read More…

The Smashing Editorial wrote

Animating SVG Files With SVGator

July 19, 2018 — We’re pretty excited by tools such as SVGator, which really speed up the process when you’re making simple SVG animations. Here’s how easy it is to use and how you can get a great-looking animation in no time. Read More…

Christopher Ng wrote

Making The Transition From After Effects To CSS Transitions And Keyframes

December 29, 2017 — As web developers, we need a good foundation to create animations that are both performant and maintainable, which is paramount to the native web app landscape. In this article find out how to go from After Effects to CSS transitions, animations and keyframes. Read More…

Karim Maaloul wrote

Exploring Animation And Interaction Techniques With WebGL (A Case Study)

September 25, 2017 — Two years ago, I decided to start a series of short WebGL experiments on Codepen. Earlier this year, I finally found the time to compile them all together on a single website named “Moments of Happiness”. Since its incarnation, I’ve found ways to explore and … Read More…

Ellina Bereza & Simon Bronnikov wrote

Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation

March 15, 2017 — Pull-to-refresh is one of the most popular gestures in mobile applications right now. It’s easy to use, natural and so intuitive that it is hard to imagine refreshing a page without it. In 2010, Loren Brichter created Tweetie, one of numerous Twitter applications. Diving … Read More…