{"id":3693,"date":"2025-11-13T08:14:20","date_gmt":"2025-11-13T08:14:20","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/"},"modified":"2025-11-13T08:14:20","modified_gmt":"2025-11-13T08:14:20","slug":"smashing-animations-svg-use-css-variables","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/","title":{"rendered":"Smashing Animations Part 6: SVGs With `<use>` &#038; CSS Variables"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>Welcome to the sixth installment of our <strong>Smashing Animations<\/strong> series! Today, we will dive into the magical world of <strong>SVGs<\/strong> and how to use the <code>&lt;use&gt;<\/code> element alongside <strong>CSS Custom Properties<\/strong> for creating magnificent animations. Whether you&#8217;re a seasoned developer or a tech enthusiast, mastering these techniques will elevate your web projects.<\/p>\n<h2>What Are SVGs and Why Use Them?<\/h2>\n<p>Scalable Vector Graphics (SVG) are XML-based vector images that can be scaled without losing quality. They are perfect for web development due to their small file size and scalability. SVGs are often used for icons, logos, and other graphics that require resolution independence.<\/p>\n<h2>Understanding the `<use>` Element<\/h2>\n<p>The <code>&lt;use&gt;<\/code> element allows you to reuse SVG elements throughout your document. This is particularly useful for maintaining consistency and reducing code duplication.<\/p>\n<h3>Basic Syntax of `<use>`<\/h3>\n<pre><code>&lt;svg&gt;\n  &lt;symbol id=\"icon-star\" viewBox=\"0 0 24 24\"&gt;\n    &lt;path d=\"M12 17.27L18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.46 13.97 5.82 21 12 17.27z\"\/&gt;\n  &lt;\/symbol&gt;\n  &lt;use href=\"#icon-star\" width=\"50\" height=\"50\" fill=\"currentColor\"\/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h2>Using CSS Custom Properties<\/h2>\n<p>CSS Custom Properties (also known as CSS variables) enhance the flexibility and maintainability of your styles. They allow you to define a value once and reuse it throughout your stylesheets.<\/p>\n<h3>Defining Custom Properties<\/h3>\n<pre><code>:root {\n  --main-color: coral;\n  --secondary-color: blue;\n}\n\nsvg {\n  fill: var(--main-color);\n}\n<\/code><\/pre>\n<h2>Step-by-Step Guide to Create SVG Animation<\/h2>\n<h3>Step 1: Create Your SVG<\/h3>\n<p>First, create your SVG using the <code>&lt;symbol&gt;<\/code> element as shown earlier. Make sure to define a unique <code>id<\/code> for each symbol.<\/p>\n<h3>Step 2: Apply CSS Custom Properties<\/h3>\n<p>Define your custom properties in the <code>:root<\/code> selector and apply them to your SVG elements for easy color management.<\/p>\n<h3>Step 3: Animate Your SVG<\/h3>\n<p>You can animate the SVG using CSS transitions or keyframes. Here\u2019s a simple hover effect:<\/p>\n<pre><code>svg:hover {\n  transition: transform 0.3s;\n  transform: scale(1.1);\n}\n<\/code><\/pre>\n<h3>Step 4: Reuse the SVG with `<use>`<\/h3>\n<p>Use the <code>&lt;use&gt;<\/code> tag to incorporate your defined SVG anywhere in your HTML:<\/p>\n<pre><code>&lt;use href=\"#icon-star\" width=\"100\" height=\"100\" fill=\"var(--secondary-color)\"\/&gt;<\/code><\/pre>\n<h2>Code Example<\/h2>\n<p>Here\u2019s a complete example bringing it all together:<\/p>\n<pre><code>&lt;svg&gt;\n  &lt;symbol id=\"icon-star\" viewBox=\"0 0 24 24\"&gt;\n    &lt;path d=\"M12 17.27L18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.46 13.97 5.82 21 12 17.27z\"\/&gt;\n  &lt;\/symbol&gt;\n\n  &lt;use href=\"#icon-star\" width=\"100\" height=\"100\" fill=\"var(--main-color)\" class=\"icon\"\/&gt;\n&lt;\/svg&gt;\n\n<style>\n:root {\n  --main-color: coral;\n  --secondary-color: blue;\n}\n\n.icon {\n  transition: transform 0.3s;\n}\n\n.icon:hover {\n  transform: scale(1.1);\n}\n<\/style><\/code><\/pre>\n<h2>FAQs<\/h2>\n<h3>What are the benefits of using SVGs?<\/h3>\n<p>SVGs are resolution-independent, easily scalable, and can be manipulated with CSS and JavaScript.<\/p>\n<h3>How do I optimize SVGs for web use?<\/h3>\n<p>Use tools like <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> and <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> to reduce file sizes and improve load times.<\/p>\n<h2>Conclusion<\/h2>\n<p>Combining SVGs with the <code>&lt;use&gt;<\/code> element and CSS Custom Properties allows for more dynamic and reusable web graphics. This technique not only enhances your design but also improves code maintainability. By following the steps outlined in this article, you can create stunning, scalable, and animated SVGs that will impress your users. For more tools to help with web development, visit <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a>.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Explore how to use SVG `<use>` and CSS custom properties for stunning animations in your web projects.<\/p>\n","protected":false},"author":1,"featured_media":2881,"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-3693","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Smashing Animations Part 6: SVGs With `` &amp; CSS Variables - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Explore how to use SVG `` and CSS custom properties for stunning animations in your web projects.\" \/>\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\/smashing-animations-svg-use-css-variables\/\" \/>\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: SVGs With `` &amp; CSS Variables - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Explore how to use SVG `` and CSS custom properties for stunning animations in your web projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-13T08:14:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Smashing Animations Part 6: SVGs With `` &#038; CSS Variables\",\"datePublished\":\"2025-11-13T08:14:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/\"},\"wordCount\":381,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/\",\"name\":\"Smashing Animations Part 6: SVGs With `` & CSS Variables - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"datePublished\":\"2025-11-13T08:14:20+00:00\",\"description\":\"Explore how to use SVG `` and CSS custom properties for stunning animations in your web projects.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"width\":1820,\"height\":1024,\"caption\":\"Comparison of the best free HTML minifiers online for web developers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-svg-use-css-variables\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Smashing Animations Part 6: SVGs With `` &#038; CSS Variables\"}]},{\"@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: SVGs With `` & CSS Variables - WebToolsLab","description":"Explore how to use SVG `` and CSS custom properties for stunning animations in your web projects.","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\/smashing-animations-svg-use-css-variables\/","og_locale":"en_US","og_type":"article","og_title":"Smashing Animations Part 6: SVGs With `` & CSS Variables - WebToolsLab","og_description":"Explore how to use SVG `` and CSS custom properties for stunning animations in your web projects.","og_url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/","og_site_name":"WebToolsLab","article_published_time":"2025-11-13T08:14:20+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Smashing Animations Part 6: SVGs With `` &#038; CSS Variables","datePublished":"2025-11-13T08:14:20+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/"},"wordCount":381,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/","url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/","name":"Smashing Animations Part 6: SVGs With `` & CSS Variables - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","datePublished":"2025-11-13T08:14:20+00:00","description":"Explore how to use SVG `` and CSS custom properties for stunning animations in your web projects.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","width":1820,"height":1024,"caption":"Comparison of the best free HTML minifiers online for web developers"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-svg-use-css-variables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Smashing Animations Part 6: SVGs With `` &#038; CSS Variables"}]},{"@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\/1752245471879.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Explore how to use SVG `` and CSS custom properties for stunning animations in your web projects.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3693","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=3693"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3693\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2881"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}