{"id":3683,"date":"2025-11-12T03:17:31","date_gmt":"2025-11-12T03:17:31","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/"},"modified":"2025-11-12T03:17:31","modified_gmt":"2025-11-12T03:17:31","slug":"magnificent-svgs-use-css-custom-properties","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/","title":{"rendered":"Smashing Animations Part 6: Magnificent SVGs With ``"},"content":{"rendered":"
\n

Introduction<\/h2>\n

Welcome back to our series on smashing animations! In this sixth part, we’re diving into the world of SVGs (Scalable Vector Graphics) and how you can leverage the `` element combined with CSS custom properties to create magnificent animations. SVGs are a powerful tool for creating responsive and scalable graphics on the web, and understanding how to manipulate them can enhance your web development projects significantly.<\/p>\n

What Are SVGs?<\/h2>\n

SVGs are XML-based vector images that allow you to create graphics that are resolution-independent. This means they scale beautifully across different devices and screen sizes. You can manipulate SVGs with CSS and JavaScript, making them incredibly versatile for animations.<\/p>\n

Understanding the `` Element<\/h2>\n

The `` element in SVG allows you to reuse existing graphical elements defined within the SVG document. This not only reduces redundancy but also optimizes loading times and performance. Let’s look at the syntax:<\/p>\n

<svg>\n  <symbol id=\"icon-star\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 2l3 7h7l-5 4 2 7-6-4-6 4 2-7-5-4h7z\" \/>\n  <\/symbol>\n  <use href=\"#icon-star\" fill=\"gold\" \/>\n<\/svg><\/code><\/pre>\n
Using CSS Custom Properties<\/h2>\n
CSS custom properties (also known as CSS variables) are a flexible way to manage styling across your webpages. By defining a set of properties, you can easily change the appearance of your SVGs without cluttering your CSS files.<\/p>\n
:root {\n  --star-color: gold;\n  --star-size: 50px;\n}\n\nsvg {\n  width: var(--star-size);\n  height: var(--star-size);\n}\n\nuse {\n  fill: var(--star-color);\n}<\/code><\/pre>\n
Step-by-Step Guide to Create SVG Animations<\/h2>\n
Step 1: Define Your SVG Symbols<\/h3>\n
Start by defining your SVG symbols. This is where you will create the reusable components.<\/p>\n
<svg style=\"display:none;\">\n  <symbol id=\"icon-star\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 2l3 7h7l-5 4 2 7-6-4-6 4 2-7-5-4h7z\" \/>\n  <\/symbol>\n<\/svg><\/code><\/pre>\n
Step 2: Use the `` Element<\/h3>\n
Now you can implement the `` element to reference the symbols you’ve created.<\/p>\n
<svg>\n  <use href=\"#icon-star\" \/>\n<\/svg><\/code><\/pre>\n
Step 3: Style with CSS Variables<\/h3>\n
Next, define your CSS custom properties to control the color and size.<\/p>\n
:root {\n  --star-color: gold;\n  --star-size: 50px;\n}\n\nsvg {\n  width: var(--star-size);\n  height: var(--star-size);\n}\n\nuse {\n  fill: var(--star-color);\n}<\/code><\/pre>\n
Step 4: Adding Animation<\/h3>\n
Finally, you can add animations using CSS transitions or keyframes.<\/p>\n
@keyframes sparkle {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n\nuse {\n  animation: sparkle 1s infinite;\n}<\/code><\/pre>\n
FAQs<\/h2>\n
What are the benefits of using SVG?<\/h3>\n
SVGs are resolution-independent, allow for easy manipulation via CSS and JavaScript, and are lightweight compared to traditional image formats.<\/p>\n
Can I animate SVGs with JavaScript?<\/h3>\n
Yes, you can animate SVGs using JavaScript along with CSS for more complex animations.<\/p>\n
How do I optimize SVG for web use?<\/h3>\n
You can use tools like the CSS Minifier<\/a> or the HTML Minifier<\/a> from WebToolsLab to optimize your SVG files.<\/p>\n
Conclusion<\/h2>\n
Creating magnificent SVGs with the `` element and CSS custom properties elevates your web development projects to a new level. With the ability to reuse graphics and manipulate styles dynamically, you’re well on your way to crafting stunning animations that engage users. Remember to optimize your SVGs and leverage tools like the WebToolsLab<\/a> for a more efficient workflow. Happy coding!<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"
Discover how to use `` and CSS custom properties to create stunning SVG animations. Step-by-step guide included.<\/p>\n","protected":false},"author":1,"featured_media":2856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-3683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"\nSmashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Discover how to use `` and CSS custom properties to create stunning SVG animations. Step-by-step guide included.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Discover how to use `` and CSS custom properties to create stunning SVG animations. Step-by-step guide included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-12T03:17:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1820\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Smashing Animations Part 6: Magnificent SVGs With ``\",\"datePublished\":\"2025-11-12T03:17:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/\"},\"wordCount\":402,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/\",\"name\":\"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"datePublished\":\"2025-11-12T03:17:31+00:00\",\"description\":\"Discover how to use `` and CSS custom properties to create stunning SVG animations. Step-by-step guide included.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752246144776\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-use-css-custom-properties\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Smashing Animations Part 6: Magnificent SVGs With ``\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab","description":"Discover how to use `` and CSS custom properties to create stunning SVG animations. Step-by-step guide included.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/","og_locale":"en_US","og_type":"article","og_title":"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab","og_description":"Discover how to use `` and CSS custom properties to create stunning SVG animations. Step-by-step guide included.","og_url":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/","og_site_name":"WebToolsLab","article_published_time":"2025-11-12T03:17:31+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Smashing Animations Part 6: Magnificent SVGs With ``","datePublished":"2025-11-12T03:17:31+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/"},"wordCount":402,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/","url":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/","name":"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","datePublished":"2025-11-12T03:17:31+00:00","description":"Discover how to use `` and CSS custom properties to create stunning SVG animations. Step-by-step guide included.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","width":1820,"height":1024,"caption":"1752246144776"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-use-css-custom-properties\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Smashing Animations Part 6: Magnificent SVGs With ``"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Discover how to use `` and CSS custom properties to create stunning SVG animations. Step-by-step guide included.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=3683"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3683\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2856"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}