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…

24 more articles

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…

Krutie Patel wrote

Building An Interactive Infographic With Vue.js

November 19, 2018 — Have you ever had a requirement in which you had to design and build an interactive web experience but the grid system fell short? Furthermore, the design elements turned into unusual shapes that just wouldn’t fit into the regular web layouts? In this article, we’re going to … 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…

Tiffany Brown wrote

Managing SVG Interaction With The Pointer Events Property

May 16, 2018 — Let’s take a look at how to shape the interactivity of SVG images — that is, control which parts of the document can receive clicks, touches, or taps — using the pointer-events property. Read More…

David Rousset wrote

How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch

August 2, 2016 — In this little tutorial, I’m going to share some tips I recently followed to build a fun demo for the Build 2016 conference. The idea was to create a small 8-bit drum machine, with 8-bit sounds and graphics: This small web app was used in one of our demos to illustrate how … Read More…

Michael Ngo wrote

The Illusion Of Life: An SVG Animation Case Study

July 26, 2016 — With flat design becoming the ever visible trend of 2016, it’s clear why there’s been a resurgence in SVG usage. The benefits are many: resolution-independence, cross-browser compatibility and accessible DOM nodes. In this article, we’ll take a look at how we can use SVGs to … Read More…

Una Kravets wrote

Web Image Effects Performance Showdown

May 19, 2016 — As browsers constantly improve their graphical rendering abilities, the ability to truly design within them is becoming more of a reality. A few lines of code can now have quick and dramatic visual impact, and allow for consistency without a lot of effort. And as with most … Read More…

Nico Brünjes wrote

The Safari Problem With SVG Sprites (Now Fixed)

May 19, 2016 — Update (19.05.2016): The bug was just fixed by Antti Koivisto and has landed in the current update of iOS (9.3.2) and Safari for OS X 9.1.1 (11601.6.17). When a user visits a site using a SVG sprite in a browser with an empty cache, the sprite is cached and will not be … Read More…

Cosima Mielke wrote

Tools And Resources For Editing, Converting And Optimizing SVGs

April 27, 2016 — SVGs are perfect for responsive web design and, since users can zoom in without sacrificing quality, meaningful from an accessibility-centered point of view. Read More…