{"id":206106,"date":"2015-08-06T11:10:41","date_gmt":"2015-08-06T18:10:41","guid":{"rendered":"http:\/\/css-tricks.com\/?p=206106"},"modified":"2015-08-06T11:10:41","modified_gmt":"2015-08-06T18:10:41","slug":"designing-flexible-maintainable-pie-charts-with-css-and-svg","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/designing-flexible-maintainable-pie-charts-with-css-and-svg\/","title":{"rendered":"Designing Flexible, Maintainable Pie Charts With CSS and SVG"},"content":{"rendered":"

Lea Verou’s explorations of creating pie charts. Particularly fascinating is her suggestion of using conic gradients. Conic gradients are specced<\/a>, but yet not supported in browsers. Thankfully, she’s made a polyfill<\/a>. Pie charts are an excellent example of why conic gradients are so cool<\/a>. Check out the tag<\/a> on CodePen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Lea Verou’s explorations of creating pie charts. Particularly fascinating is her suggestion of using conic gradients. Conic gradients are specced, but yet not supported in browsers. Thankfully, she’s made a polyfill. Pie charts are an excellent example of why conic gradients are so cool. Check out the tag on CodePen.<\/p>\n","protected":false},"author":223806,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":326021,"url":"https:\/\/css-tricks.com\/firefox-83\/","url_meta":{"origin":206106,"position":0},"title":"Firefox 83","date":"November 18, 2020","format":false,"excerpt":"There's a small line in the changelog that is is big news for CSS: We've added support for\u00a0CSS Conic Gradients\u00a0(bug\u00a01632351) and\u00a0(bug\u00a01175958). \ud83c\udf89\ud83c\udf89\ud83c\udf89 Conic gradients are circular, just like their radial counterpart, but place color stops around the circle instead of from the center of the circle. CodePen Embed Fallback Adding\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/firefix-conic-gradient-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5700,"url":"https:\/\/css-tricks.com\/css3-gradients\/","url_meta":{"origin":206106,"position":1},"title":"CSS\u00a0Gradients","date":"March 3, 2014","format":false,"excerpt":"Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Gradients are typically one color that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/safariloadsgradient.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":275090,"url":"https:\/\/css-tricks.com\/chrome-69\/","url_meta":{"origin":206106,"position":2},"title":"Chrome 69","date":"August 8, 2018","format":false,"excerpt":"Chrome 69 is notable for us CSS developers: Conic gradients (i.e. background: conic-gradient(red, green, blue);): We've got lots of interesting articles about conic gradients here, and here's some use cases and a polyfill from Lea Verou. Logical box model properties: margin, padding, and border all get an upgrade for more\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/chrome.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325490,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-css-gradients\/","url_meta":{"origin":206106,"position":3},"title":"A Complete Guide to CSS Gradients","date":"November 16, 2020","format":false,"excerpt":"Like how you can use the background-color property in CSS to declare a solid color background, you can use the background-image property not only to declare image files as backgrounds but gradients as well. Using CSS gradients is better for control and performance than using an actual image (of a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/css-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335427,"url":"https:\/\/css-tricks.com\/the-gray-dead-zone-of-gradients\/","url_meta":{"origin":206106,"position":4},"title":"The “Gray Dead Zone” of Gradients","date":"March 1, 2021","format":false,"excerpt":"Erik D. Kennedy notes an interesting phenomenon of color gradients. If you have a gradient between two colors where the line between them in the color space goes through the zero-saturation middle, you get this \"gray dead zone\" in the middle. It's a real thing. See the gray middle here:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/color-gradient-gray-dead-zone.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":307270,"url":"https:\/\/css-tricks.com\/background-patterns-simplified-by-conic-gradients\/","url_meta":{"origin":206106,"position":5},"title":"Background Patterns, Simplified by Conic Gradients","date":"May 28, 2020","format":false,"excerpt":"For those who have missed the big news, Firefox now supports conic gradients! Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true (it's false by default and all it takes to switch is double-clicking\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/206106"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=206106"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/206106\/revisions"}],"predecessor-version":[{"id":206204,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/206106\/revisions\/206204"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=206106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=206106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=206106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}