You should really look at everything Amelia does, but I get extra excited about her interactive blog posts. Her latest about creating a gauge with SVG in React<\/a> is unreal. Just the stuff about understanding viewBox<\/code> is amazing and that’s like 10% of it. <\/p>\n\n\n\n

Don’t miss her earlier posts like the one on CSS Cascade<\/a> or React Hooks<\/a> either. <\/p>\n","protected":false},"excerpt":{"rendered":"

You should really look at everything Amelia does, but I get extra excited about her interactive blog posts. Her latest […]<\/p>\n","protected":false},"author":3,"featured_media":308121,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1341,520,557,469],"class_list":["post-308118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-data-visualization","tag-graph","tag-react","tag-svg"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-02-at-1.36.15-PM.png?fit=2648%2C2050&ssl=1","jetpack-related-posts":[{"id":319069,"url":"https:\/\/css-tricks.com\/morphing-svg-with-react-spring\/","url_meta":{"origin":308118,"position":0},"title":"Morphing SVG With react-spring","author":"Mikael Ainalem","date":"August 26, 2020","format":false,"excerpt":"I\u2019ve been intrigued by the morphing effect ever since I was a little kid. There\u2019s something about a shape-shifting animation that always captures my attention. The first time I saw morphing left me wondering\u200a \u201c\u200aWow, how did they do that?\u201d Since then, I\u2019ve created demos and written an article about\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/react-spring-svg-morph.gif?fit=940%2C470&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/react-spring-svg-morph.gif?fit=940%2C470&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/react-spring-svg-morph.gif?fit=940%2C470&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/react-spring-svg-morph.gif?fit=940%2C470&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":325860,"url":"https:\/\/css-tricks.com\/creating-ui-components-in-svg\/","url_meta":{"origin":308118,"position":1},"title":"Creating UI Components in SVG","author":"Sarah Drasner","date":"November 23, 2020","format":false,"excerpt":"I\u2019m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes and yet, still has elements, like text, links, and aria labels available to you.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/CleanShot-2020-11-15-at-12.36.14%402x.png?fit=1200%2C627&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/CleanShot-2020-11-15-at-12.36.14%402x.png?fit=1200%2C627&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/CleanShot-2020-11-15-at-12.36.14%402x.png?fit=1200%2C627&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/CleanShot-2020-11-15-at-12.36.14%402x.png?fit=1200%2C627&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/CleanShot-2020-11-15-at-12.36.14%402x.png?fit=1200%2C627&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":238780,"url":"https:\/\/css-tricks.com\/creating-svg-icon-system-react\/","url_meta":{"origin":308118,"position":2},"title":"Creating an SVG Icon System with React","author":"Sarah Drasner","date":"March 15, 2016","format":false,"excerpt":"I recently went to Michael Jackson and Ryan Florence\u2019s ReactJS Training. I was really excited to attend, partially because I had so many questions about SVG and React. There are a lot of bits about working with React and SVG, and especially manipulating it, that aren\u2019t quite supported yet. One\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":266365,"url":"https:\/\/css-tricks.com\/making-svg-icon-libraries-for-react-apps\/","url_meta":{"origin":308118,"position":3},"title":"Making SVG icon libraries for React apps","author":"Chris Coyier","date":"December 14, 2018","format":false,"excerpt":"Nicolas Gallagher: At Twitter I used the approach described here to publish the company\u2019s SVG icon library in several different formats: optimized SVGs, plain JavaScript modules, React DOM components, and React Native components. There is no One True Way\u00a9 to make an SVG icon system. The only thing that SVG\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":340692,"url":"https:\/\/css-tricks.com\/svg-loader-a-different-way-to-work-with-external-svg\/","url_meta":{"origin":308118,"position":4},"title":"svg-loader: A Different Way to Work With External SVG","author":"Shubham Jain","date":"May 19, 2021","format":false,"excerpt":"SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external file that also retains the format\u2019s customization powers. For instance,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":259513,"url":"https:\/\/css-tricks.com\/react-dataviz\/","url_meta":{"origin":308118,"position":5},"title":"React + Dataviz","author":"Chris Coyier","date":"September 18, 2017","format":false,"excerpt":"There is a natural connection between Data Visualization (dataviz) and SVG. SVG is a graphics format based on geometry and geometry is exactly what is needed to visually display data in compelling and accurate ways. SVG has got the \"visualization\" part, but SVG is more declarative than programmatic. To write\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/reactdataviz.png?fit=1000%2C412&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/reactdataviz.png?fit=1000%2C412&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/reactdataviz.png?fit=1000%2C412&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/reactdataviz.png?fit=1000%2C412&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/308118","targetHints":{"allow":["GET"]}}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=308118"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/308118\/revisions"}],"predecessor-version":[{"id":308122,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/308118\/revisions\/308122"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/308121"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=308118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=308118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=308118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}