{"id":245253,"date":"2016-09-06T07:00:49","date_gmt":"2016-09-06T14:00:49","guid":{"rendered":"http:\/\/css-tricks.com\/?p=245253"},"modified":"2016-09-06T07:00:49","modified_gmt":"2016-09-06T14:00:49","slug":"slicing-svg-9-ways","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/slicing-svg-9-ways\/","title":{"rendered":"Slicing SVG 9 Ways"},"content":{"rendered":"<p>Paul Lewis animated a 3D Card Flip. Straightforward enough there, but this needed a shadow element as well:<\/p>\n<blockquote><p>The shadow may need to move around or fade, so we need a solution that we can animate with transforms &#038; opacity, since they can be handed off to the GPU. It will need to be separate to the element it\u2019s shadowing, since we will likely want to fade and move it without affecting the other element.<\/p><\/blockquote>\n<p>He tried <code>box-shadow<\/code> and <code>filter: blur()<\/code>, but both aren&#8217;t performant enough.<\/p>\n<p>He tried an SVG element with a blur filter, but SVG alone can&#8217;t do 9-slice scaling (necessary to keep the corners from scaling awkwardly). <\/p>\n<p>The winner was using an SVG image but applying it to an element via <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image\/\"><code>border-image<\/code><\/a>, which essentially 9-slice scaling. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Paul Lewis animated a 3D Card Flip. Straightforward enough there, but this needed a shadow element as well: The shadow may need to move around or fade, so we need a solution that we can animate with transforms &#038; opacity, since they can be handed off to the GPU. It will need to be separate [&hellip;]<\/p>\n","protected":false},"author":3,"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":[833,831,832,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":342164,"url":"https:\/\/css-tricks.com\/adding-shadows-to-svg-icons-with-css-and-svg-filters\/","url_meta":{"origin":245253,"position":0},"title":"Adding Shadows to SVG Icons With CSS and SVG Filters","date":"June 11, 2021","format":false,"excerpt":"Why would we need to apply shadows to SVG? Shadows are a common design feature that can help elements, like icons, stand out. They could be persistent, or applied in different states (e.g. :hover, :focus, or :active) to indicate interaction to users.Shadows happen in real life, so they can be\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/svg-shadow-twitter.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288941,"url":"https:\/\/css-tricks.com\/drawing-realistic-clouds-with-svg-and-css\/","url_meta":{"origin":245253,"position":1},"title":"Drawing Realistic Clouds with SVG and CSS","date":"June 13, 2019","format":false,"excerpt":"Greek mythology tells the story of Zeus creating the cloud nymph, Nephele. Like other Greek myths, this tale gets pretty bizarre and X-rated. Here\u2019s a very abridged, polite version. Nephele, we are told, was created by Zeus in the image of his own beautiful wife. A mortal meets Nephele, falls\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/clouds-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":195076,"url":"https:\/\/css-tricks.com\/gooey-effect\/","url_meta":{"origin":245253,"position":2},"title":"The Gooey Effect","date":"February 4, 2015","format":false,"excerpt":"The following is a post by Lucas Bebber. Lucas the originator of some of the most creative effects I've ever seen on the web. So much so I couldn't resist blogging about them myself several times. Much better this time: we got the man himself to explain how SVG filters\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192227,"url":"https:\/\/css-tricks.com\/scale-svg\/","url_meta":{"origin":245253,"position":3},"title":"How to Scale SVG","date":"January 6, 2015","format":false,"excerpt":"The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of\u00a0SVG Essentials\u00a0and author of the upcoming\u00a0Using SVG with CSS3 and HTML5. Amelia and I both will be speaking on SVG at the upcoming\u00a0RWD Summit\u00a0as well! Here, she shares an epic guide\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":334309,"url":"https:\/\/css-tricks.com\/three-ways-to-blob-with-css-and-svg\/","url_meta":{"origin":245253,"position":4},"title":"Three Ways to Blob with CSS and SVG","date":"February 19, 2021","format":false,"excerpt":"Blobs are the smooth, random, jelly-like shapes that have a whimsical quality and are just plain fun. They can be used as illustration elements and background effects on the web. So, how are they made? Just crack open an illustration app and go for it, right? Sure, that\u2019s cool. But\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/blobs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":245253,"position":5},"title":"A Compendium of SVG Information","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/245253"}],"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=245253"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/245253\/revisions"}],"predecessor-version":[{"id":245254,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/245253\/revisions\/245254"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=245253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=245253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=245253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}