{"id":1224,"date":"2020-12-18T17:05:13","date_gmt":"2020-12-18T08:05:13","guid":{"rendered":"http:\/\/meeny.com\/?p=1224"},"modified":"2020-12-18T17:05:14","modified_gmt":"2020-12-18T08:05:14","slug":"animation-svg","status":"publish","type":"post","link":"https:\/\/meeny.com\/?p=1224","title":{"rendered":"Animation SVG"},"content":{"rendered":"\n<p>Animation SVG<br>Animation SVG How to animate SVG<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Animation SVG\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/b6-wYhzJmi0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\n&lt;div class=\"contents bg-primary overflow-hidden\">\n  &lt;div class=\"container d-flex justify-content-center align-items-center h-100\">\n    &lt;div class=\"section8 w-100\">\n      &lt;h3 class=\"display-5 text-center Mreflect mb-5 text-light\">&#91;S8]Button hover effect - Bootstrap4&lt;\/h3>\n\n      &lt;div class=\"jumbotron bg-primary text-light rounded-lg\">\n        &lt;h1 class=\"display-4 font-weight-bolder Mglow\">Lorem &lt;span class=\"font-weight-light text-success Mblink\">ipsum&lt;\/span>&lt;\/h1>\n        &lt;p class=\"lead\">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.&lt;\/p>\n        &lt;hr class=\"my-4 border\">\n        &lt;p>It uses utility classes for typography and spacing to space content out within the larger container.&lt;\/p>\n\n\n        &lt;a class=\"btn border text-light\" href=\"#\" role=\"button\">\n          &lt;svg width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\" class=\"bi bi-check2-circle Mbtn\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            &lt;path class=\"Mblink\" fill-rule=\"evenodd\" d=\"M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z\"\/>\n            &lt;path fill-rule=\"evenodd\" d=\"M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z\"\/>\n          &lt;\/svg>\n          &lt;span>more 1&lt;\/span>\n        &lt;\/a>\n\n        &lt;button class=\"btn border text-light\">\n          &lt;svg width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\" class=\"bi bi-check2-circle Mbtn\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            &lt;path fill-rule=\"evenodd\" d=\"M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z\"\/>\n            &lt;path class=\"Mblink\" fill-rule=\"evenodd\" d=\"M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z\"\/>\n          &lt;\/svg>\n          &lt;span>more 2&lt;\/span>\n        &lt;\/button>\n\n\n        &lt;div class=\"mb-5\">&lt;\/div>\n\n        &lt;div class=\"media\">\n          &lt;svg height=\"80px\" viewBox=\"0 0 80 80\">\n            &lt;circle fill=\"#fff\" cx=\"6\" cy=\"50\" r=\"6\">\n              &lt;animate \n              attributeName = \"opacity\"\n              values=\"0;1;0\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              begin=\"0.1\"\n            \/>\n            &lt;animate \n            attributeName = \"cy\"\n            values=\"50;60;50\"\n            dur=\"1s\"\n            repeatCount=\"indefinite\"\n            begin=\"0.1\"\n           \/>\n            &lt;\/circle>\n            &lt;circle fill=\"#fff\" cx=\"26\" cy=\"50\" r=\"6\">\n              &lt;animate \n              attributeName = \"opacity\"\n              values=\"0;1;0\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              begin=\"0.2\"\n            \/>\n            &lt;animate \n            attributeName = \"cy\"\n            values=\"50;60;50\"\n            dur=\"1s\"\n            repeatCount=\"indefinite\"\n            begin=\"0.2\"\n            \/>\n            &lt;\/circle>\n            &lt;circle fill=\"#fff\" cx=\"46\" cy=\"50\" r=\"6\">\n            &lt;animate \n            attributeName = \"opacity\"\n            values=\"0;1;0\"\n            dur=\"1s\"\n            repeatCount=\"indefinite\"\n            begin=\"0.3\"\n           \/>\n            &lt;animate \n            attributeName = \"cy\"\n            values=\"50;60;50\"\n            dur=\"1s\"\n            repeatCount=\"indefinite\"\n            begin=\"0.3\"\n           \/>\n            &lt;\/circle>\n          &lt;\/svg>\n          &lt;div class=\"media-body pl-3\">\n            &lt;h2 class=\"mt-0\">Media heading&lt;\/h2>\n            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.\n          &lt;\/div>\n        &lt;\/div>\n\n\n\n\n      &lt;\/div>\n\n\n\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/div>\n\n\n\n\n\n\n&lt;div class=\"contents bg-primary overflow-hidden\">\n  &lt;div class=\"container d-flex justify-content-center align-items-center h-100\">\n    &lt;div class=\"section9 w-100\">\n      &lt;h3 class=\"display-5 text-center Mreflect mb-5 text-light\">\n        &#91;s9]Animation SVG\n      &lt;\/h3>\n\n      &lt;div class=\"row row-cols-6 text-center\">\n        &lt;div class=\"p-1\">\n          &lt;svg viewBox=\"0 0 30 30\">\n            &lt;rect width=\"10\" height=\"10\">\n              &lt;animate\n                attributeName=\"y\"\n                from=\"0\"\n                to=\"20\"\n                dur=\"1s\"\n                repeatCount=\"indefinite\"\n              \/>\n            &lt;\/rect>\n          &lt;\/svg>\n        &lt;\/div>\n        &lt;div class=\"p-1\">\n          &lt;svg viewBox=\"0 0 10 10\">\n            &lt;rect width=\"10\" height=\"10\">\n              &lt;animate\n                attributeName=\"rx\"\n                values=\"0;5;0\"\n                dur=\"3s\"\n                repeatCount=\"indefinite\"\n              \/>\n            &lt;\/rect>\n          &lt;\/svg>\n        &lt;\/div>\n        &lt;div class=\"p-1\">\n          &lt;svg height=\"80px\" viewBox=\"0 0 80 80\">\n            &lt;circle fill=\"#fff\" cx=\"6\" cy=\"50\" r=\"6\">&lt;\/circle>\n              &lt;animate \n                attributeName = \"opacity\"\n                values=\"0;1;0\"\n                dur=\"1s\"\n                repeatCount=\"indefinite\"\n                begin=\"0.1\"\n              \/>\n            &lt;circle fill=\"#fff\" cx=\"26\" cy=\"50\" r=\"6\">\n              &lt;animate \n                attributeName = \"opacity\"\n                values=\"0;1;0\"\n                dur=\"1s\"\n                repeatCount=\"indefinite\"\n                begin=\"0.2\"\n              \/>\n            &lt;\/circle>\n            &lt;circle fill=\"#fff\" cx=\"46\" cy=\"50\" r=\"6\">\n              &lt;animate \n                attributeName = \"opacity\"\n                values=\"0;1;0\"\n                dur=\"1s\"\n                repeatCount=\"indefinite\"\n                begin=\"0.3\"\n              \/>\n            &lt;\/circle>\n          &lt;\/svg>\n        &lt;\/div>\n        &lt;div class=\"p-1\">\n          &lt;svg height=\"80px\" viewBox=\"0 0 80 80\">\n            &lt;circle class=\"Mloading\" fill=\"#fff\" cx=\"6\" cy=\"50\" r=\"6\" style=\"--Mdelay : 1\">&lt;\/circle>\n            &lt;circle class=\"Mloading\" fill=\"#fff\" cx=\"26\" cy=\"50\" r=\"6\" style=\"--Mdelay : 2\">&lt;\/circle>\n            &lt;circle class=\"Mloading\" fill=\"#fff\" cx=\"46\" cy=\"50\" r=\"6\" style=\"--Mdelay : 3\">&lt;\/circle>\n          &lt;\/svg>\n        &lt;\/div>\n        &lt;div class=\"p-1\">\n          &lt;svg height=\"80px\" viewBox=\"0 0 80 80\">\n            &lt;circle fill=\"#fff\" cx=\"6\" cy=\"50\" r=\"6\">\n              &lt;animate \n              attributeName = \"opacity\"\n              values=\"0;1;0\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              begin=\"0.1\"\n            \/>\n            &lt;animate \n            attributeName = \"cy\"\n            values=\"50;60;50\"\n            dur=\"1s\"\n            repeatCount=\"indefinite\"\n            begin=\"0.1\"\n           \/>\n            &lt;\/circle>\n            &lt;circle fill=\"#fff\" cx=\"26\" cy=\"50\" r=\"6\">\n              &lt;animate \n              attributeName = \"opacity\"\n              values=\"0;1;0\"\n              dur=\"1s\"\n              repeatCount=\"indefinite\"\n              begin=\"0.2\"\n            \/>\n            &lt;animate \n            attributeName = \"cy\"\n            values=\"50;60;50\"\n            dur=\"1s\"\n            repeatCount=\"indefinite\"\n            begin=\"0.2\"\n            \/>\n            &lt;\/circle>\n            &lt;circle fill=\"#fff\" cx=\"46\" cy=\"50\" r=\"6\">\n            &lt;animate \n            attributeName = \"opacity\"\n            values=\"0;1;0\"\n            dur=\"1s\"\n            repeatCount=\"indefinite\"\n            begin=\"0.3\"\n           \/>\n            &lt;animate \n            attributeName = \"cy\"\n            values=\"50;60;50\"\n            dur=\"1s\"\n            repeatCount=\"indefinite\"\n            begin=\"0.3\"\n           \/>\n            &lt;\/circle>\n          &lt;\/svg>\n        &lt;\/div>\n        &lt;div class=\"p-1\">\n          &lt;svg width=\"200\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            &lt;g>\n             &lt;title>Layer 1&lt;\/title>\n             &lt;path class=\"Mline\" id=\"svg_1\" d=\"m18,106.45313l63,55.54688l101,-127\" stroke-width=\"8px\" stroke=\"#000\" fill=\"none\"\/>\n            &lt;\/g>\n           &lt;\/svg>\n        &lt;\/div>\n\n      &lt;\/div>\n\n\n      &lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  \n\n<\/code><\/pre>\n\n\n\n<p>SCSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.Mglow{\n    animation: Mglow 2s ease-in-out infinite;\n}\n\n@keyframes Mglow{\n    40%{\n        text-shadow: 0 0 15px $color-3;\n    }\n}\n\n.Mblink{\n    animation: Mblink 2s ease-in-out infinite;\n}\n\n@keyframes Mblink{\n    0%{\n        opacity: 1;\n    }\n    50%{\n        opacity: 0;\n    }\n    100%{\n        opacity: 1;\n    }\n}\n\n\n.Mloading{\n    animation: Mloading 2s ease-in-out infinite;\n    animation-delay: calc(0.2s * var(--Mdelay));\n}\n\n@keyframes Mloading{\n    40%{\n        opacity: 0;\n    }\n}\n\n.Mline{\n    animation: Mline 2s infinite;\n    stroke-dasharray: 300;\n    stroke-dashoffset: 300;\n}\n@keyframes Mline{\n    20%{\n        stroke-dashoffset: 300;\n    }\n    60%{\n        stroke-dashoffset: 0;\n    }\n    100%{\n        stroke-dashoffset: 0;\n    }\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-meeny\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"L2YCv1bKwd\"><a href=\"https:\/\/meeny.com\/2020\/06\/20\/bootstrap4-theming-ep01\/\">Bootstrap4 theming ep01<\/a><\/blockquote><iframe title=\"&#8220;Bootstrap4 theming ep01&#8221; &#8212; Meeny\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/meeny.com\/2020\/06\/20\/bootstrap4-theming-ep01\/embed\/#?secret=L2YCv1bKwd\" data-secret=\"L2YCv1bKwd\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-meeny\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"TTvquDSZWH\"><a href=\"https:\/\/meeny.com\/2020\/06\/22\/bootstrap4-theming-ep02\/\">Bootstrap4 theming ep02<\/a><\/blockquote><iframe title=\"&#8220;Bootstrap4 theming ep02&#8221; &#8212; Meeny\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/meeny.com\/2020\/06\/22\/bootstrap4-theming-ep02\/embed\/#?secret=TTvquDSZWH\" data-secret=\"TTvquDSZWH\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Animation SVGAnimation SVG How to animate SVG HTML SCSS<\/p>\n","protected":false},"author":1,"featured_media":1226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[62],"tags":[415,410,411,444,443,442,765,597,396,762,397,395,394,398,422,763,438,766,439,441,764],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animation SVG - Meeny<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/meeny.com\/?p=1224\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animation SVG - Meeny\" \/>\n<meta property=\"og:description\" content=\"Animation SVGAnimation SVG How to animate SVG HTML SCSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/meeny.com\/?p=1224\" \/>\n<meta property=\"og:site_name\" content=\"Meeny\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-18T08:05:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-18T08:05:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Meeny\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Meeny\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/meeny.com\/?p=1224#article\",\"isPartOf\":{\"@id\":\"https:\/\/meeny.com\/?p=1224\"},\"author\":{\"name\":\"Meeny\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9\"},\"headline\":\"Animation SVG\",\"datePublished\":\"2020-12-18T08:05:13+00:00\",\"dateModified\":\"2020-12-18T08:05:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/meeny.com\/?p=1224\"},\"wordCount\":26,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?p=1224#primaryimage\"},\"thumbnailUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png\",\"keywords\":[\"bootstrap\",\"bootstrap css\",\"bootstrap html\",\"bootstrap theme fonts\",\"Bootstrap4 primary color change\",\"Bootstrap4 theming\",\"button hover effect\",\"card hover effect\",\"css\",\"Css Custom Properties\",\"html\",\"html code\",\"html css\",\"javascript\",\"responsive design\",\"Responsive Font Size\",\"sticky-top\",\"svg animation\",\"template\",\"theming\",\"Typo Animation\"],\"articleSection\":[\"HTML &amp; CSS\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/meeny.com\/?p=1224#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/meeny.com\/?p=1224\",\"url\":\"https:\/\/meeny.com\/?p=1224\",\"name\":\"Animation SVG - Meeny\",\"isPartOf\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/meeny.com\/?p=1224#primaryimage\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?p=1224#primaryimage\"},\"thumbnailUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png\",\"datePublished\":\"2020-12-18T08:05:13+00:00\",\"dateModified\":\"2020-12-18T08:05:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/meeny.com\/?p=1224#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/meeny.com\/?p=1224\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?p=1224#primaryimage\",\"url\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png\",\"contentUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/meeny.com\/?p=1224#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/meeny.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animation SVG\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website\",\"url\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/\",\"name\":\"Meeny\",\"description\":\"Issues &amp; News\",\"publisher\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\",\"name\":\"Meeny\",\"url\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png\",\"contentUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png\",\"width\":180,\"height\":41,\"caption\":\"Meeny\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9\",\"name\":\"Meeny\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g\",\"caption\":\"Meeny\"},\"sameAs\":[\"http:\/\/blog.epart.kr\"],\"url\":\"https:\/\/meeny.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animation SVG - Meeny","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:\/\/meeny.com\/?p=1224","og_locale":"ko_KR","og_type":"article","og_title":"Animation SVG - Meeny","og_description":"Animation SVGAnimation SVG How to animate SVG HTML SCSS","og_url":"https:\/\/meeny.com\/?p=1224","og_site_name":"Meeny","article_published_time":"2020-12-18T08:05:13+00:00","article_modified_time":"2020-12-18T08:05:14+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png","type":"image\/png"}],"author":"Meeny","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Meeny","Est. reading time":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/meeny.com\/?p=1224#article","isPartOf":{"@id":"https:\/\/meeny.com\/?p=1224"},"author":{"name":"Meeny","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9"},"headline":"Animation SVG","datePublished":"2020-12-18T08:05:13+00:00","dateModified":"2020-12-18T08:05:14+00:00","mainEntityOfPage":{"@id":"https:\/\/meeny.com\/?p=1224"},"wordCount":26,"commentCount":0,"publisher":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization"},"image":{"@id":"https:\/\/meeny.com\/?p=1224#primaryimage"},"thumbnailUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png","keywords":["bootstrap","bootstrap css","bootstrap html","bootstrap theme fonts","Bootstrap4 primary color change","Bootstrap4 theming","button hover effect","card hover effect","css","Css Custom Properties","html","html code","html css","javascript","responsive design","Responsive Font Size","sticky-top","svg animation","template","theming","Typo Animation"],"articleSection":["HTML &amp; CSS"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/meeny.com\/?p=1224#respond"]}]},{"@type":"WebPage","@id":"https:\/\/meeny.com\/?p=1224","url":"https:\/\/meeny.com\/?p=1224","name":"Animation SVG - Meeny","isPartOf":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website"},"primaryImageOfPage":{"@id":"https:\/\/meeny.com\/?p=1224#primaryimage"},"image":{"@id":"https:\/\/meeny.com\/?p=1224#primaryimage"},"thumbnailUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png","datePublished":"2020-12-18T08:05:13+00:00","dateModified":"2020-12-18T08:05:14+00:00","breadcrumb":{"@id":"https:\/\/meeny.com\/?p=1224#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/meeny.com\/?p=1224"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?p=1224#primaryimage","url":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png","contentUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/12\/012-2SVG.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/meeny.com\/?p=1224#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/meeny.com\/"},{"@type":"ListItem","position":2,"name":"Animation SVG"}]},{"@type":"WebSite","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website","url":"https:\/\/meeny.com\/?tag=ios-13-4-5\/","name":"Meeny","description":"Issues &amp; News","publisher":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/meeny.com\/?tag=ios-13-4-5\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization","name":"Meeny","url":"https:\/\/meeny.com\/?tag=ios-13-4-5\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/","url":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png","contentUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png","width":180,"height":41,"caption":"Meeny"},"image":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9","name":"Meeny","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g","caption":"Meeny"},"sameAs":["http:\/\/blog.epart.kr"],"url":"https:\/\/meeny.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1224"}],"collection":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1224"}],"version-history":[{"count":1,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1224\/revisions"}],"predecessor-version":[{"id":1227,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1224\/revisions\/1227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/media\/1226"}],"wp:attachment":[{"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}