{"id":3288,"date":"2020-06-29T15:35:38","date_gmt":"2020-06-29T15:35:38","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3288"},"modified":"2023-03-02T09:59:25","modified_gmt":"2023-03-02T09:59:25","slug":"css-tutorial-css-animations-with-svg","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-css-animations-with-svg\/","title":{"rendered":"CSS Tutorial &#8211; CSS Animations With SVGs"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Transitions &amp; animations combined with SVGs. There isn\u2019t just one way to animate SVG. There is the &lt;animate&gt; tag that goes right into the SVG code. We\u2019re going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS.<br \/>\n<iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/bGvXGrP?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/bGvXGrP\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">  &lt;div class=\"arrow arrow--top\"&gt;\r\n    &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"270.11\" height=\"649.9\" overflow=\"visible\"&gt;\r\n      &lt;style&gt;\r\n        .geo-arrow {\r\n          fill: none;\r\n          stroke: #fff;\r\n          stroke-width: 2;\r\n          stroke-miterlimit: 10\r\n        }\r\n      &lt;\/style&gt;\r\n      &lt;g class=\"item-to bounce-1\"&gt;\r\n        &lt;path class=\"geo-arrow draw-in\" d=\"M135.06 142.564L267.995 275.5 135.06 408.434 2.125 275.499z\" \/&gt;\r\n      &lt;\/g&gt;\r\n      &lt;circle class=\"geo-arrow item-to bounce-2\" cx=\"194.65\" cy=\"69.54\" r=\"7.96\" \/&gt;\r\n      &lt;circle class=\"geo-arrow draw-in\" cx=\"194.65\" cy=\"39.5\" r=\"7.96\" \/&gt;\r\n      &lt;circle class=\"geo-arrow item-to bounce-3\" cx=\"194.65\" cy=\"9.46\" r=\"7.96\" \/&gt;\r\n      &lt;g class=\"geo-arrow item-to bounce-2\"&gt;\r\n        &lt;path class=\"st0 draw-in\" d=\"M181.21 619.5l13.27 27 13.27-27zM194.48 644.5v-552\" \/&gt;\r\n      &lt;\/g&gt;\r\n    &lt;\/svg&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"arrow arrow--bottom\"&gt;\r\n    &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"31.35\" height=\"649.9\" overflow=\"visible\"&gt;\r\n      &lt;style&gt;\r\n        .geo-arrow {\r\n          fill: none;\r\n          stroke: #fff;\r\n          stroke-width: 2;\r\n          stroke-miterlimit: 10\r\n        }\r\n      &lt;\/style&gt;\r\n      &lt;g class=\"item-to bounce-1\"&gt;\r\n        &lt;circle class=\"geo-arrow item-to bounce-3\" cx=\"15.5\" cy=\"580.36\" r=\"7.96\" \/&gt;\r\n        &lt;circle class=\"geo-arrow draw-in\" cx=\"15.5\" cy=\"610.4\" r=\"7.96\" \/&gt;\r\n        &lt;circle class=\"geo-arrow item-to bounce-2\" cx=\"15.5\" cy=\"640.44\" r=\"7.96\" \/&gt;\r\n        &lt;g class=\"item-to bounce-2\"&gt;\r\n          &lt;path class=\"geo-arrow draw-in\" d=\"M28.94 30.4l-13.26-27-13.27 27zM15.68 5.4v552\" \/&gt;\r\n        &lt;\/g&gt;\r\n      &lt;\/g&gt;\r\n    &lt;\/svg&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"main\"&gt;\r\n    &lt;div class=\"main__text-wrapper\"&gt;\r\n    &lt;h1 class=\"main__title\"&gt;Transitions &amp; Animations&lt;\/h1&gt;\r\n    &lt;h2&gt;Combined with SVGs&lt;\/h2&gt;      \r\n      &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"dotted-circle\" width=\"352\" height=\"352\" overflow=\"visible\"&gt;\r\n  &lt;circle cx=\"176\" cy=\"176\" r=\"174\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-dasharray=\"12.921,11.9271\"\/&gt;\r\n&lt;\/svg&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">@import url(\"https:\/\/fonts.googleapis.com\/css2?family=DM+Mono:ital,wght@0,300;1,500&amp;display=swap\");\r\n\r\n$purple: #8a15ff;\r\n$blue: #3800e7;\r\n$ltblue: #15e0ff;\r\n$magenta: #d000c5;\r\n\r\n\/\/ This is an example of animations &amp; svgs... I completely understand that the amount of absolute positioning in this file is insane... ;) &lt;3\r\n\r\nbody {\r\n  background: linear-gradient($blue, $purple);\r\n  height: 100vh;\r\n  font-size: calc(14px + (26 - 14) * ((100vw - 300px) \/ (1600 - 300)));\r\n  font-family: \"DM Mono\", monospace;\r\n  font-weight: 300;\r\n  overflow: hidden;\r\n  color: white;\r\n  text-align: center;\r\n}\r\n\r\nh1 {\r\n  font-size: 3em;\r\n  margin-bottom: 0.2em;\r\n}\r\n\r\nh2 {\r\n  font-size: 2em;\r\n}\r\n\r\n.main {\r\n  height: 100vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  &amp;:before,\r\n  &amp;:after {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    z-index: -3;\r\n  }\r\n  &amp;:before {\r\n    right: 0;\r\n    bottom: -19;\r\n    height: 30em;\r\n    width: 30em;\r\n    border-radius: 30em;\r\n    background: linear-gradient($blue, $purple);\r\n    align-self: flex-end;\r\n    animation: gradient-fade 8s ease-in-out 3s infinite alternate;\r\n  }\r\n  &amp;:after {\r\n    $circle-unit: 10em;\r\n    top: 0;\r\n    left: 30;\r\n    height: $circle-unit;\r\n    width: $circle-unit;\r\n    border-radius: $circle-unit;\r\n    background: linear-gradient($blue, $purple);\r\n    animation: gradient-fade-alt 6s ease-in-out 3s infinite alternate;\r\n  }\r\n\r\n  &amp;__text-wrapper {\r\n    position: relative;\r\n    padding: 2em;\r\n\r\n    &amp;:before,\r\n    &amp;:after {\r\n      content: \"\";\r\n      display: block;\r\n      position: absolute;\r\n    }\r\n\r\n    &amp;:before {\r\n      $circle-unit: 13em;\r\n      z-index: -1;\r\n      top: -3em;\r\n      right: -3em;\r\n      width: $circle-unit;\r\n      height: $circle-unit;\r\n      opacity: 0.7;\r\n      border-radius: $circle-unit;\r\n      background: linear-gradient($ltblue, $purple);\r\n      animation: rotation 7s linear infinite;\r\n    }\r\n\r\n    &amp;:after {\r\n      $circle-unit: 20em;\r\n      z-index: -1;\r\n      bottom: -#{$circle-unit};\r\n      width: $circle-unit;\r\n      height: $circle-unit;\r\n      border-radius: $circle-unit;\r\n      background: linear-gradient($magenta, $purple);\r\n      animation: rotation 7s linear infinite;\r\n    }\r\n  }\r\n}\r\n\r\n.arrow {\r\n  z-index: 1000;\r\n  opacity: 0.5;\r\n  position: absolute;\r\n\r\n  &amp;--top {\r\n    top: 0;\r\n    left: -5em;\r\n  }\r\n\r\n  &amp;--bottom {\r\n    bottom: 0;\r\n    right: 3em;\r\n  }\r\n}\r\n\r\n.circle {\r\n  transform: translate(50%, -50%) rotate(0deg);\r\n  transform-origin: center;\r\n\r\n  &amp;--ltblue {\r\n    $circle-unit: 20em;\r\n    height: $circle-unit;\r\n    width: $circle-unit;\r\n    border-radius: $circle-unit;\r\n    background: linear-gradient($ltblue, $blue);\r\n  }\r\n}\r\n\r\n.backdrop {\r\n  position: absolute;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  display: block;\r\n  background-color: pink;\r\n}\r\n\r\n.dotted-circle {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  opacity: 0.3;\r\n  animation: rotation 38s linear infinite;\r\n}\r\n\r\n\/\/ animations\r\n.draw-in {\r\n  stroke-dasharray: 1000;\r\n  stroke-dashoffset: 10;\r\n  animation: draw 15s ease-in-out alternate infinite;\r\n}\r\n\r\n@keyframes draw {\r\n  from {\r\n    stroke-dashoffset: 1000;\r\n  }\r\n\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n.item-to {\r\n  animation-duration: 10s;\r\n  animation-iteration-count: infinite;\r\n  transform-origin: bottom;\r\n}\r\n\r\n.bounce-1 {\r\n  animation-name: bounce-1;\r\n  animation-timing-function: ease;\r\n}\r\n\r\n.bounce-2 {\r\n  animation-name: bounce-2;\r\n  animation-timing-function: ease;\r\n}\r\n\r\n.bounce-3 {\r\n  animation-name: bounce-3;\r\n  animation-timing-function: ease;\r\n}\r\n\r\n@keyframes bounce-1 {\r\n  0% {\r\n    transform: translateY(0);\r\n  }\r\n  50% {\r\n    transform: translateY(50px);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes bounce-2 {\r\n  0% {\r\n    transform: translateY(0);\r\n  }\r\n  50% {\r\n    transform: translateY(-30px);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes bounce-3 {\r\n  0% {\r\n    transform: translateY(0);\r\n  }\r\n  50% {\r\n    transform: translateY(30px);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n\/\/ gradient fade\r\n\r\n@keyframes rotation {\r\n  from {\r\n    transform: rotate(0deg);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@keyframes gradient-fade {\r\n  from {\r\n    transform: translate(10%, -10%) rotate(0deg);\r\n  }\r\n  to {\r\n    transform: translate(50%, -50%) rotate(360deg);\r\n  }\r\n}\r\n\r\n@keyframes gradient-fade-alt {\r\n  from {\r\n    transform: translate(-20%, 20%) rotate(0deg);\r\n  }\r\n  to {\r\n    transform: translate(-60%, 60%) rotate(360deg);\r\n  }\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Transitions &amp; animations combined with SVGs. There isn\u2019t just <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-css-animations-with-svg\/\" title=\"CSS Tutorial &#8211; CSS Animations With SVGs\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3526,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[308,268,197,103,227],"newstopic":[],"class_list":{"0":"post-3288","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-css-float","9":"tag-css-grid","10":"tag-css-tutorial","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3288"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3288\/revisions"}],"predecessor-version":[{"id":3290,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3288\/revisions\/3290"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3526"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3288"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}