Designing A Flexible, Maintainable CSS Pie Chart With SVG

by Lea Verou

17 min read
No meows just yet

July 28, 2015 — Pie charts have traditionally been anything but simple to create with web technologies, despite being incredibly common for information ranging from simple stats to progress indicators and timers.

20 more articles

Dirk Weber wrote

The Art Of SVG Filters And Why It Is Awesome

May 26, 2015 — After almost 20 years of evolution, today’s web typography, with its high-density displays and support for OpenType features, is just a step away from the typographic quality of the offline world. But there’s still one field of graphic design where we still … Read More…

Sarah Drasner wrote

A Few Different Ways To Use SVG Sprites In Animation

March 17, 2015 — There are some things we know and like about SVGs. First, SVGs have smooth, clean edges on any display, so using SVGs can reduce the number of HTTP requests for image replacement. Second, it’s easy to make an SVG scalable to its container for responsive development. In this … Read More…

Gion Kunz wrote

Chartist.js, An Open-Source Library For Responsive Charts

December 16, 2014 — The list of charting libraries for the web is already quite long, and you might ask yourself why we would need to make it any longer. Whenever you need to develop an application’s dashboard, embed some usage statistics or simply visualize some data, you will find yourself … Read More…

Sara Soueidan wrote

Styling And Animating SVGs With CSS

November 3, 2014 — Why is it so important to optimize your SVGs? Also, why even put in the effort to make them accessible? In this article, Sara Soueidan explais why, and also how to style and animate with CSS. Read More…

Karsten Bruns wrote

Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors

October 15, 2014 — The 6 Plus is the first iPhone that sports a “Retina HD” display — the sharpest display Apple has ever made. It forces designers to provide an additional set of image resources to developers to match that sharpness. We needed only one set of assets for the original iPhone up … Read More…

Ilya Zayats wrote

Love Generating SVG With JavaScript? Move It To The Server!

May 26, 2014 — I hope that by now, in 2014, there is no need to explain why SVG is a blessing to developers who want to ensure that their graphics look sharp on all devices, especially with their huge diversity of resolutions. But just like any other technology, SVG has its limitations. … Read More…

Ilya Pukhalski wrote

Rethinking Responsive SVG

March 5, 2014 — If you haven’t seen Joe Harrison’s responsive icons technique yet, you’ll most probably be impressed as much as I was when I first discovered it. In this article, I’d like to explore what we can do with SVG beyond “traditional” scalable vector graphics that are used to … Read More…

Estelle Weyl wrote

How To Solve Adaptive Images In Responsive Web Design

June 3, 2013 — Adaptive images are the current hot topic in conversations about adaptive and responsive Web design. Why? Because no one likes any of the solutions thus far. New elements and attributes are being discussed as a solution for what is, for most of us, a big headache: to provide … Read More…

Chris Coyier wrote

SVG Fallback, Vertical Rhythm, CSS Project Structure

October 15, 2012 — Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Read More…