{"id":58292,"date":"2019-01-05T04:18:56","date_gmt":"2019-01-05T11:18:56","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/"},"modified":"2019-01-05T04:18:56","modified_gmt":"2019-01-05T11:18:56","slug":"html5-svg-fill-animation-with-css3-and-vanilla-javascript","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/","title":{"rendered":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/01\/html5-svg-fill-animation-css3-vanilla-javascript\/\"><title>HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript<\/title><\/p>\n<article>\n<header>\n<h1>HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript<\/h1>\n<address>Marina Ferreira<\/address>\n<p>                  <time datetime=\"2019-01-04T13:00:19+01:00\">2019-01-04T13:00:19+01:00<\/time><time datetime=\"2019-01-04T18:08:02+00:00\">2019-01-04T18:08:02+00:00<\/time><\/header>\n<p>SVG stands for <strong>S<\/strong>calable <strong>V<\/strong>ector <strong>G<\/strong>raphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the 2D plane. Moreover, you can add twitch properties on those paths (such as stroke, color, thickness, fill, and more) in order to produce animations.<\/p>\n<p>Since April 2017, <a href=\"https:\/\/www.w3.org\/TR\/fill-stroke-3\/\">CSS Level 3 Fill and Stroke Module<\/a> allow SVG colors and fill patterns to be set from an external stylesheet, instead of setting attributes on each element. In this tutorial, we will use a simple plain hex color, but both fill and stroke properties also accept patterns, gradients and images as values.<\/p>\n<p><strong>Note<\/strong>: <em>When visiting the <a href=\"https:\/\/www.awwwards.com\/\">Awwwards<\/a> website, the animated note display can only be viewed with browser width set to 1024px or more.<\/em><\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/demo.gif\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/demo.gif?w=800\"  alt=\"Note Display Project Demo\"><\/a><figcaption>A demo of the final result (<a href=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/demo.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<ul>\n<li>? Demo: <a href=\"https:\/\/marina-ferreira.github.io\/smashing-magazine-note-display-demo\/\">Note Display Project<\/a><\/li>\n<li>? Repo: <a href=\"https:\/\/github.com\/marina-ferreira\/smashing-magazine-note-display-demo\">Note Display Repo<\/a><\/li>\n<\/ul>\n<aside data-audience=\"non-subscriber\">\n<div>\n<div>\n<p>Front-end is messy and complicated these days. That&#8217;s why we publish <a href=\"https:\/\/smashed.by\/perfpanelarticles\">articles<\/a>, <a href=\"https:\/\/smashed.by\/perfpanelbooks\">printed books<\/a> and <a href=\"https:\/\/smashed.by\/perfpaneltv\">webinars<\/a> with useful techniques to improve your work. Even better: <a href=\"https:\/\/smashed.by\/perfpanelmembership\">Smashing Membership<\/a> with a growing selection of <strong>front-end\u00a0&#038;\u00a0UX goodies<\/strong>. So you get your work done, better and faster.<\/p>\n<p>      <a href=\"https:\/\/smashed.by\/perfpanelmembership\"><br \/>\n        Explore Smashing Membership\u00a0?<br \/>\n      <\/a>\n      <\/div>\n<div>\n        <a href=\"https:\/\/smashed.by\/perfpanelmembership\"><\/p>\n<div>\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.smashingmagazine.com\/images\/smashing-cat\/cat-rollerderby.svg\" alt=\"Smashing Cat, just preparing to do some magic stuff.\" width=\"310\" height=\"400\"><\/div>\n<p>      <\/a>\n      <\/div>\n<\/p><\/div>\n<\/aside>\n<h3>File Structure<\/h3>\n<p>Let\u2019s start by creating the files in the terminal:<\/p>\n<pre><code>?  mkdir note-display\n?  cd note-display\n?  touch index.html styles.css scripts.js\n<\/code><\/pre>\n<h3>HTML<\/h3>\n<p>Here is the initial template that links both <code>css<\/code> and <code>js<\/code> files:<\/p>\n<pre><code><html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n\n  <title>Note Display<\/title>\n\n  <link rel=\"stylesheet\" href=\".\/styles.css\">\n<\/head>\n<body>\n  <script src=\".\/scripts.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n<p>Each note element consists of a list item: <code>li<\/code> that holds the <code>circle<\/code>, the <code>note<\/code> value, and its <code>label<\/code>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40ce656b-7171-4573-998f-c3f545842ffa\/direct-children.jpg?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/direct-children.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40ce656b-7171-4573-998f-c3f545842ffa\/direct-children.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40ce656b-7171-4573-998f-c3f545842ffa\/direct-children.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40ce656b-7171-4573-998f-c3f545842ffa\/direct-children.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40ce656b-7171-4573-998f-c3f545842ffa\/direct-children.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/direct-children.jpg?w=900\" sizes=\"100vw\" alt=\"List item element and direct children\"><\/a><figcaption>\n\t\t\tList item element and its direct children: <code>.circle<\/code>, <code>.percent<\/code> and <code>.label<\/code>. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/40ce656b-7171-4573-998f-c3f545842ffa\/direct-children.jpg\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The <code>.circle_svg<\/code> is an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\">SVG<\/a> element, that wraps two <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/circle\"><circle><\/a> elements. The first is the path to be filled while the second is the fill that will be animated.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aa5b4850-91cb-498b-a32a-6d107eae2dac\/svg-elements.jpg?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/svg-elements.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aa5b4850-91cb-498b-a32a-6d107eae2dac\/svg-elements.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aa5b4850-91cb-498b-a32a-6d107eae2dac\/svg-elements.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aa5b4850-91cb-498b-a32a-6d107eae2dac\/svg-elements.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aa5b4850-91cb-498b-a32a-6d107eae2dac\/svg-elements.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/svg-elements.jpg?w=900\" sizes=\"100vw\" alt=\"SVG elements\"><\/a><figcaption>\n\t\t\tSVG elements. SVG wrapper and circle tags. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aa5b4850-91cb-498b-a32a-6d107eae2dac\/svg-elements.jpg\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The <code>note<\/code> is separated into integer and decimals so different font sizes can be applied to them. The <code>label<\/code> is a simple <code><span><\/code>. So, putting all of this together looks like this:<\/p>\n<pre><code><li class=\"note-display\">\n  <div class=\"circle\">\n    <svg width=\"84\" height=\"84\" class=\"circle__svg\">\n      <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--path\"><\/circle>\n      <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--fill\"><\/circle>\n    <\/svg>\n\n    <div class=\"percent\">\n      <span class=\"percent__int\">0.<\/span>\n      <span class=\"percent__dec\">00<\/span>\n    <\/div>\n  <\/div>\n\n  <span class=\"label\">Transparent<\/span>\n<\/li>\n<\/code><\/pre>\n<p>The <code>cx<\/code> and <code>cy<\/code> attributes define the circle\u2019s x-axis and y-axis center point. The <code>r<\/code> attribute defines its radius.<\/p>\n<p>You have probably noticed the underscore\/dash pattern in classes names. That\u2019s <a href=\"http:\/\/getbem.com\/naming\/\">BEM<\/a>, which stands for <code>block<\/code>, <code>element<\/code> and <code>modifier<\/code>. It is a methodology that makes your element naming more structured, organized and semantic.<\/p>\n<p><strong>Recommended reading<\/strong>: <em><a href=\"https:\/\/www.smashingmagazine.com\/2018\/06\/bem-for-beginners\/\">An Explanation Of BEM And Why You Need It<\/a><\/em><\/p>\n<p>To finish the template structures, let\u2019s wrap the four list items in an unordered list element:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0010cf6e-569f-4ea4-9b96-5e9fc6f836f8\/note-display-ul.jpg?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/note-display-ul.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0010cf6e-569f-4ea4-9b96-5e9fc6f836f8\/note-display-ul.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0010cf6e-569f-4ea4-9b96-5e9fc6f836f8\/note-display-ul.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0010cf6e-569f-4ea4-9b96-5e9fc6f836f8\/note-display-ul.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0010cf6e-569f-4ea4-9b96-5e9fc6f836f8\/note-display-ul.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/note-display-ul.jpg?w=900\" sizes=\"100vw\" alt=\"Unordered list wrapper\"><\/a><figcaption>\n\t\t\tUnordered list wrapper holds four <code>li<\/code> children (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0010cf6e-569f-4ea4-9b96-5e9fc6f836f8\/note-display-ul.jpg\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<pre><code><ul class=\"display-container\">\n  <li class=\"note-display\">\n    <div class=\"circle\">\n      <svg width=\"84\" height=\"84\" class=\"circle__svg\">\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--path\"><\/circle>\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--fill\"><\/circle>\n      <\/svg>\n\n      <div class=\"percent\">\n        <span class=\"percent__int\">0.<\/span>\n        <span class=\"percent__dec\">00<\/span>\n      <\/div>\n    <\/div>\n\n    <span class=\"label\">Transparent<\/span>\n  <\/li>\n\n  <li class=\"note-display\">\n    <div class=\"circle\">\n      <svg width=\"84\" height=\"84\" class=\"circle__svg\">\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--path\"><\/circle>\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--fill\"><\/circle>\n      <\/svg>\n\n      <div class=\"percent\">\n        <span class=\"percent__int\">0.<\/span>\n        <span class=\"percent__dec\">00<\/span>\n      <\/div>\n    <\/div>\n\n    <span class=\"label\">Reasonable<\/span>\n  <\/li>\n\n  <li class=\"note-display\">\n    <div class=\"circle\">\n      <svg width=\"84\" height=\"84\" class=\"circle__svg\">\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--path\"><\/circle>\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--fill\"><\/circle>\n      <\/svg>\n\n      <div class=\"percent\">\n        <span class=\"percent__int\">0.<\/span>\n        <span class=\"percent__dec\">00<\/span>\n      <\/div>\n    <\/div>\n\n    <span class=\"label\">Usable<\/span>\n  <\/li>\n\n  <li class=\"note-display\">\n    <div class=\"circle\">\n      <svg width=\"84\" height=\"84\" class=\"circle__svg\">\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--path\"><\/circle>\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--fill\"><\/circle>\n      <\/svg>\n\n      <div class=\"percent\">\n        <span class=\"percent__int\">0.<\/span>\n        <span class=\"percent__dec\">00<\/span>\n      <\/div>\n    <\/div>\n\n    <span class=\"label\">Exemplary<\/span>\n  <\/li>\n<\/ul>\n<\/code><\/pre>\n<p>You must be asking yourself what the labels <code>Transparent<\/code>, <code>Reasonable<\/code>, <code>Usable<\/code> and <code>Exemplary<\/code> mean. The more acquainted you get with programming, you will realize that writing code is not only about making the application functional, but also assuring that it will be long-term maintainable and scalable. That is only achieved if your code is easy to change.<\/p>\n<blockquote><p>\u201cThe acronym <code>TRUE<\/code> should help decide if the code you write will be able to accommodate change in the future or not.\u201d<\/p><\/blockquote>\n<p>So, next time, ask yourself:<\/p>\n<ul>\n<li><code>Transparent<\/code>:  Are code changes consequences clear?<\/li>\n<li><code>Reasonable<\/code>: Is cost benefit worth it?<\/li>\n<li><code>Usable<\/code>: Will I be able to reuse it in unexpected scenarios?<\/li>\n<li><code>Exemplary<\/code>: Does it present high quality as an example for future code?<\/li>\n<\/ul>\n<p><strong>Note<\/strong>: <em>\u201c<a href=\"https:\/\/g.co\/kgs\/TnBTNp\">Practical Object-Oriented Design in Ruby<\/a>\u201d by Sandi Metz explains <code>TRUE<\/code> along with other principles and how to achieve those through design patterns. If you haven\u2019t taken some time to study design patterns yet, consider adding this book to your bedtime reading.<\/em><\/p>\n<div><\/div>\n<h3>CSS<\/h3>\n<p>Let\u2019s import the fonts and apply a reset to all items:<\/p>\n<pre><code>\n@import url('https:\/\/fonts.googleapis.com\/css?family=Nixie+One|Raleway:200');\n\n* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n<\/code><\/pre>\n<p>The <code>box-sizing: border-box<\/code> property includes padding and border values into an element\u2019s total width and height, so it\u2019s easier to calculate its dimensions.<\/p>\n<p><strong>Note<\/strong>: <em>For a visual explanation on <code>box-sizing<\/code>, please read \u201c<a href=\"https:\/\/medium.com\/swlh\/make-your-life-easier-with-css-box-sizing-3b6b2578bccd\">Make Your Life Easier With CSS Box Sizing<\/a>.\u201d<\/em><\/p>\n<pre><code>body {\n  height: 100vh;\n  color: #fff;\n  display: flex;\n  background: #3E423A;\n  font-family: 'Nixie One', cursive;\n}\n\n.display-container {\n  margin: auto;\n  display: flex;\n}\n<\/code><\/pre>\n<p>By combining the rules <code>display: flex<\/code> in the <code>body<\/code> and <code>margin-auto<\/code> in the <code>.display-container<\/code>, it\u2019s possible to center the child element both vertically and horizontally. The <code>.display-container<\/code> element will also be a <code>flex-container<\/code>; that way, its children will be placed in the same row along the main axis.<\/p>\n<p>The <code>.note-display<\/code> list item will also be a <code>flex-container<\/code>. Since there are many children for centering, let\u2019s do it through the <code>justify-content<\/code> and <code>align-items<\/code> properties. All <code>flex-items<\/code> will be centered along the <code>cross<\/code> and <code>main<\/code> axis. If you\u2019re not sure what those are, check out the alignment section at \u201c<a href=\"https:\/\/medium.com\/swlh\/css-flexbox-fundamentals-visual-guide-1c467f480dac\">CSS Flexbox Fundamentals Visual Guide<\/a>.\u201d<\/p>\n<pre><code>.note-display {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0 25px;\n}\n<\/code><\/pre>\n<p>Let\u2019s apply a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Attribute\/stroke\">stroke<\/a> to the circles by setting the rules <code>stroke-width<\/code>, <code>stroke-opacity<\/code> and <code>stroke-linecap<\/code> that altogether style the stroke live ends. Next, let\u2019s add a color to each circle:<\/p>\n<pre><code>.circle__progress {\n  fill: none;\n  stroke-width: 3;\n  stroke-opacity: 0.3;\n  stroke-linecap: round;\n}\n\n.note-display:nth-child(1) .circle__progress { stroke: #AAFF00; }\n.note-display:nth-child(2) .circle__progress { stroke: #FF00AA; }\n.note-display:nth-child(3) .circle__progress { stroke: #AA00FF; }\n.note-display:nth-child(4) .circle__progress { stroke: #00AAFF; }\n<\/code><\/pre>\n<p>In order to position the <code>percent<\/code> element absolutely, it\u2019s necessary to know absolutely to what. The <code>.circle<\/code> element should be the reference, so let\u2019s add <code>position: relative<\/code> to it.<\/p>\n<p><strong>Note<\/strong>: <em>For a deeper, visual explanation on absolute positioning, please read \u201c<a href=\"https:\/\/medium.freecodecamp.org\/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd\">How To Understand CSS Position Absolute Once And For All<\/a>.\u201d<\/em><\/p>\n<p>Another way of centering elements is to combine <code>top: 50%<\/code>, <code>left: 50%<\/code> and <code>transform: translate(-50%, -50%);<\/code> which position the element\u2019s center at its parent\u2019s center.<\/p>\n<pre><code>.circle {\n  position: relative;\n}\n\n.percent {\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  position: absolute;\n  font-weight: bold;\n  text-align: center;\n  line-height: 28px;\n  transform: translate(-50%, -50%);\n}\n\n.percent__int { font-size: 28px; }\n.percent__dec { font-size: 12px; }\n\n.label {\n  font-family: 'Raleway', serif;\n  font-size: 14px;\n  text-transform: uppercase;\n  margin-top: 15px;\n}\n<\/code><\/pre>\n<p>By now, the template should be looking like this:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5538b933-8d87-4609-bd37-9fa9fb4321a9\/note-display-template.jpg?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/note-display-template.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5538b933-8d87-4609-bd37-9fa9fb4321a9\/note-display-template.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5538b933-8d87-4609-bd37-9fa9fb4321a9\/note-display-template.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5538b933-8d87-4609-bd37-9fa9fb4321a9\/note-display-template.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5538b933-8d87-4609-bd37-9fa9fb4321a9\/note-display-template.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/note-display-template.jpg?w=900\" sizes=\"100vw\" alt=\"Finished initial template\"><\/a><figcaption>\n\t\t\tFinished template elements and styles (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5538b933-8d87-4609-bd37-9fa9fb4321a9\/note-display-template.jpg\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<h3>Fill Transition<\/h3>\n<p>The circle animation can be created with the help of two circle SVG properties: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Attribute\/stroke-dasharray\"><code>stroke-dasharray<\/code><\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Attribute\/stroke-dashoffset\"><code>stroke-dashoffset<\/code><\/a>.<\/p>\n<blockquote><p>\u201c<code>stroke-dasharray<\/code> defines the dash-gap pattern in a stroke.\u201d<\/p><\/blockquote>\n<p>It can take up to four values:<\/p>\n<ul>\n<li>When it\u2019s set to an only integer (<code>stroke-dasharray: 10<\/code>), dashes and gaps have the same size;<\/li>\n<li>For two values (<code>stroke-dasharray: 10 5<\/code>), the first is applied to dashes, second to gaps;<\/li>\n<li>The third and forth forms (<code>stroke-dasharray: 10 5 2<\/code> and <code>stroke-dasharray: 10 5 2 3<\/code>) will generate dashes and gaps in various sizes.<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/dasharray-animation.gif\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/dasharray-animation.gif?w=800\"  alt=\"Stroke dasharray property values\"><\/a><figcaption><code>stroke-dasharray<\/code> property values (<a href=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/dasharray-animation.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>The image to the left shows the property <code>stroke-dasharray<\/code> being set from 0 to 238px, which is the circle circumference length.<\/p>\n<p>The second image represents the <code>stroke-dashoffset<\/code> property that offsets the beginning of the dash array. It is also set from 0 to the circle circumference length.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/stroke-properties.gif\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/stroke-properties.gif?w=800\"  alt=\"Stroke dasharray and dashoffset properties\"><\/a><figcaption><code>stroke-dasharray<\/code> and <cod>stroke-dashoffset<\/cod> properties (<a href=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/stroke-properties.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>To produce the filling effect, we will set the <code>stroke-dasharray<\/code> to the circumference length, so that all of its length gets filled with a big dash and no gap. We\u2019ll also offset it by the same value, so it gets \u201chidden\u201d. Then the <code>stroke-dashoffset<\/code> will be updated to the corresponding note value, filling the stroke accordingly to the transition duration.<\/p>\n<div><\/div>\n<p>The properties updating will be done in the scripts through <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_variables\">CSS Variables<\/a>. Let\u2019s declare the variables and set the properties:<\/p>\n<pre><code>.circle__progress--fill {\n  --initialStroke: 0;\n  --transitionDuration: 0;\n  stroke-opacity: 1;\n  stroke-dasharray: var(--initialStroke);\n  stroke-dashoffset: var(--initialStroke);\n  transition: stroke-dashoffset var(--transitionDuration) ease;\n}\n<\/code><\/pre>\n<p>In order to set the initial value and update the variables, let\u2019s start by selecting all <code>.note-display<\/code> elements with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/querySelectorAll\"><code>document.querySelectorAll<\/code><\/a>. The <code>transitionDuration<\/code> will be set to <code>900<\/code> milliseconds.<\/p>\n<p>Then, we iterate through the displays array, select its <code>.circle__progress.circle__progress--fill<\/code> and extract the <code>r<\/code> attribute set in the HTML to calculate the circumference length. With that, we can set the initial <code>--dasharray<\/code> and <code>--dashoffset<\/code> values.<\/p>\n<p>The animation will occur when the <code>--dashoffset<\/code> variable gets updated by a 100ms setTimeout:<\/p>\n<pre><code>const displays = document.querySelectorAll('.note-display');\nconst transitionDuration = 900;\n\ndisplays.forEach(display => {\n  let progress = display.querySelector('.circle__progress--fill');\n  let radius = progress.r.baseVal.value;\n  let circumference = 2 * Math.PI * radius;\n\n  progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);\n  progress.style.setProperty('--initialStroke', circumference);\n\n  setTimeout(() => progress.style.strokeDashoffset = 50, 100);\n});\n<\/code><\/pre>\n<p>To get the transition starting from the top, the  <code>.circle__svg<\/code> element has to be rotated:<\/p>\n<pre><code>.circle__svg {\n  transform: rotate(-90deg);\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/fill-animation.gif\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/fill-animation.gif?w=800\"  alt=\"Stroke properties transition\"><\/a><figcaption>Stroke properties transition (<a href=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/fill-animation.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>Now, let\u2019s calculate the <code>dashoffset<\/code> value \u2014 relative to the note. The note value will be inserted to each <code>li<\/code> item through the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/data-*\">data-*<\/a> attribute. The <code>*<\/code> can be switched for any name that suits your needs and it can then, be retrieved in JavaScript through the element\u2019s dataset: <code>element.dataset.*<\/code>.<\/p>\n<p><strong>Note<\/strong>: <em> You can read more about the data-* attribute on <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/data-*\">MDN Web Docs<\/a>.<\/em><\/p>\n<p>Our attribute will be called \u201c<code>data-note<\/code>\u201d:<\/p>\n<pre><code><ul class=\"display-container\">\n+ <li class=\"note-display\" data-note=\"7.50\">\n    <div class=\"circle\">\n      <svg width=\"84\" height=\"84\" class=\"circle__svg\">\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--path\"><\/circle>\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--fill\"><\/circle>\n      <\/svg>\n\n      <div class=\"percent\">\n        <span class=\"percent__int\">0.<\/span>\n        <span class=\"percent__dec\">00<\/span>\n      <\/div>\n    <\/div>\n\n    <span class=\"label\">Transparent<\/span>\n  <\/li>\n\n+ <li class=\"note-display\" data-note=\"9.27\">\n    <div class=\"circle\">\n      <svg width=\"84\" height=\"84\" class=\"circle__svg\">\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--path\"><\/circle>\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--fill\"><\/circle>\n      <\/svg>\n\n      <div class=\"percent\">\n        <span class=\"percent__int\">0.<\/span>\n        <span class=\"percent__dec\">00<\/span>\n      <\/div>\n    <\/div>\n\n    <span class=\"label\">Reasonable<\/span>\n  <\/li>\n\n+ <li class=\"note-display\" data-note=\"6.93\">\n    <div class=\"circle\">\n      <svg width=\"84\" height=\"84\" class=\"circle__svg\">\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--path\"><\/circle>\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--fill\"><\/circle>\n      <\/svg>\n\n      <div class=\"percent\">\n        <span class=\"percent__int\">0.<\/span>\n        <span class=\"percent__dec\">00<\/span>\n      <\/div>\n    <\/div>\n\n    <span class=\"label\">Usable<\/span>\n  <\/li>\n\n+ <li class=\"note-display\" data-note=\"8.72\">\n    <div class=\"circle\">\n      <svg width=\"84\" height=\"84\" class=\"circle__svg\">\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--path\"><\/circle>\n        <circle cx=\"41\" cy=\"41\" r=\"38\" class=\"circle__progress circle__progress--fill\"><\/circle>\n      <\/svg>\n\n      <div class=\"percent\">\n        <span class=\"percent__int\">0.<\/span>\n        <span class=\"percent__dec\">00<\/span>\n      <\/div>\n    <\/div>\n\n    <span class=\"label\">Exemplary<\/span>\n  <\/li>\n<\/ul>\n<\/code><\/pre>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/parseFloat\"><code>parseFloat<\/code><\/a> method will convert the string returned by <code>display.dataset.note<\/code> into a floating point number. The <code>offset<\/code> represents the percentage missing to reach the maximum score. So, for a <code>7.50<\/code> note, we would have <code>(10 - 7.50) \/ 10 = 0.25<\/code>, which means the <code>circumference<\/code> length should be offset by <code>25%<\/code> of its value:<\/p>\n<pre><code>let note = parseFloat(display.dataset.note);\nlet offset = circumference * (10 - note) \/ 10;\n<\/code><\/pre>\n<p>Updating the <code>scripts.js<\/code>:<\/p>\n<pre><code>const displays = document.querySelectorAll('.note-display');\nconst transitionDuration = 900;\n\ndisplays.forEach(display => {\n  let progress = display.querySelector('.circle__progress--fill');\n  let radius = progress.r.baseVal.value;\n  let circumference = 2 * Math.PI * radius;\n+ let note = parseFloat(display.dataset.note);\n+ let offset = circumference * (10 - note) \/ 10;\n\n  progress.style.setProperty('--initialStroke', circumference);\n  progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);\n\n+ setTimeout(() => progress.style.strokeDashoffset = offset, 100);\n});\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/fill-to-percent-animation.gif\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/fill-to-percent-animation.gif?w=800\"  alt=\"Stroke properties transition up to note value\"><\/a><figcaption>Stroke properties transition up to note value (<a href=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/fill-to-percent-animation.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>Before we move on, let\u2019s extract the stoke transition to its own method:<\/p>\n<pre><code>const displays = document.querySelectorAll('.note-display');\nconst transitionDuration = 900;\n\ndisplays.forEach(display => {\n- let progress = display.querySelector('.circle__progress--fill');\n- let radius = progress.r.baseVal.value;\n- let circumference = 2 * Math.PI * radius;\n  let note = parseFloat(display.dataset.note);\n- let offset = circumference * (10 - note) \/ 10;\n\n- progress.style.setProperty('--initialStroke', circumference);\n- progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);\n\n- setTimeout(() => progress.style.strokeDashoffset = offset, 100);\n\n+ strokeTransition(display, note);\n});\n\n+ function strokeTransition(display, note) {\n+   let progress = display.querySelector('.circle__progress--fill');\n+   let radius = progress.r.baseVal.value;\n+   let circumference = 2 * Math.PI * radius;\n+   let offset = circumference * (10 - note) \/ 10;\n\n+   progress.style.setProperty('--initialStroke', circumference);\n+   progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);\n\n+   setTimeout(() => progress.style.strokeDashoffset = offset, 100);\n+ }\n<\/code><\/pre>\n<h3>Note Value Increase<\/h3>\n<p>There is still the note transition from <code>0.00<\/code> to the note value to be built. The first thing to do is to separate the integer and decimal values. We will use the string method <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/split\"><code>split()<\/code><\/a> (it takes an argument that determines where the string will be broken and returns an array containing both broken strings). Those will be converted to numbers and passed as arguments to the <code>increaseNumber()<\/code> function, along with the <code>display<\/code> element and a flag indicating if its an integer or a decimal.<\/p>\n<pre><code>const displays = document.querySelectorAll('.note-display');\nconst transitionDuration = 900;\n\ndisplays.forEach(display => {\n  let note = parseFloat(display.dataset.note);\n+ let [int, dec] = display.dataset.note.split('.');\n+ [int, dec] = [Number(int), Number(dec)];\n\n  strokeTransition(display, note);\n\n+ increaseNumber(display, int, 'int');\n+ increaseNumber(display, dec, 'dec');\n});\n<\/code><\/pre>\n<p>In the <code>increaseNumber()<\/code> function, we select either the <code>.percent__int<\/code> or <code>.percent__dec<\/code> element, depending on the <code>className<\/code>, and also in case the output should contain a decimal point or not. We\u2019ve set our <code>transitionDuration<\/code> to <code>900ms<\/code>. Now, to animate a number from 0 to 7, for example, the duration has to be divided by the note <code>900 \/ 7 = 128.57ms<\/code>. The result represents how long each increase iteration will take. This means our <code>setInterval<\/code> will fire every <code>128.57ms<\/code>.<\/p>\n<p>With those variables set, let\u2019s define the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WindowOrWorkerGlobalScope\/setInterval\"><code>setInterval<\/code><\/a>. The <code>counter<\/code> variable will be appended to the element as text and increased on each iteration:<\/p>\n<pre><code>function increaseNumber(display, number, className) {\n  let element = display.querySelector(`.percent__${className}`),\n      decPoint = className === 'int' ? '.' : '',\n      interval = transitionDuration \/ number,\n      counter = 0;\n\n  let increaseInterval = setInterval(() => {\n    element.textContent = counter + decPoint;\n    counter++;\n  }, interval);\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/infinite-counter-animation.gif\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/infinite-counter-animation.gif?w=800\"  alt=\"Infinite counter increase\"><\/a><figcaption>Infinite counter increase (<a href=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/infinite-counter-animation.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>Cool! It does increase the values, but it kind of does it forever. We need to clear the <code>setInterval<\/code> when the notes achieve the value we want. That is done with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WindowOrWorkerGlobalScope\/clearInterval\"><code>clearInterval<\/code><\/a> function:<\/p>\n<pre><code>function increaseNumber(display, number, className) {\n  let element = display.querySelector(`.percent__${className}`),\n      decPoint = className === 'int' ? '.' : '',\n      interval = transitionDuration \/ number,\n      counter = 0;\n\n  let increaseInterval = setInterval(() => {\n+   if (counter === number) { window.clearInterval(increaseInterval); }\n\n    element.textContent = counter + decPoint;\n    counter++;\n  }, interval);\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/finished-project.gif\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/finished-project.gif?w=800\"  alt=\"Finished note display project\"><\/a><figcaption>Finished project (<a href=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/finished-project.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>Now the number is updated up to the note value and cleared with <code>clearInterval()<\/code> function.<\/p>\n<p>That\u2019s pretty much it for this tutorial. I hope you enjoyed it!<\/p>\n<p>If you feel like building something a bit more interactive, check out my <a href=\"https:\/\/medium.freecodecamp.org\/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae\">Memory Game Tutorial<\/a> created with Vanilla JavaScript. It covers basic HTML5, CSS3 and JavaScript concepts such as positioning, perspective, transitions, Flexbox, event handling, timeouts and ternaries.<\/p>\n<p>Happy coding! ?<\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/logo-red-4.png?w=900\" alt=\"Smashing Editorial\"><span>(dm, ra, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript Marina Ferreira 2019-01-04T13:00:19+01:002019-01-04T18:08:02+00:00 SVG stands for Scalable Vector Graphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-58292","post","type-post","status-publish","format-standard","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScriptHTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript Marina Ferreira 2019-01-04T13:00:19+01:002019-01-04T18:08:02+00:00SVG stands for Scalable Vector Graphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the 2D plane.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScriptHTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript Marina Ferreira 2019-01-04T13:00:19+01:002019-01-04T18:08:02+00:00SVG stands for Scalable Vector Graphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the 2D plane.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-01-05T11:18:56+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-01-05T11:18:56+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScriptHTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript Marina Ferreira 2019-01-04T13:00:19+01:002019-01-04T18:08:02+00:00SVG stands for Scalable Vector Graphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the 2D plane.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#article\",\"name\":\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript | Design for Immersive Technologies\",\"headline\":\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/demo.gif?fit=%2C&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#articleImage\"},\"datePublished\":\"2019-01-05T04:18:56-07:00\",\"dateModified\":\"2019-01-05T04:18:56-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#listItem\",\"name\":\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#listItem\",\"position\":3,\"name\":\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/\",\"name\":\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript | Design for Immersive Technologies\",\"description\":\"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScriptHTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript Marina Ferreira 2019-01-04T13:00:19+01:002019-01-04T18:08:02+00:00SVG stands for Scalable Vector Graphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the 2D plane.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"datePublished\":\"2019-01-05T04:18:56-07:00\",\"dateModified\":\"2019-01-05T04:18:56-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript | Design for Immersive Technologies","description":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScriptHTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript Marina Ferreira 2019-01-04T13:00:19+01:002019-01-04T18:08:02+00:00SVG stands for Scalable Vector Graphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the 2D plane.","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#article","name":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript | Design for Immersive Technologies","headline":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/demo.gif?fit=%2C&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#articleImage"},"datePublished":"2019-01-05T04:18:56-07:00","dateModified":"2019-01-05T04:18:56-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#listItem","name":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#listItem","position":3,"name":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/","name":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript | Design for Immersive Technologies","description":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScriptHTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript Marina Ferreira 2019-01-04T13:00:19+01:002019-01-04T18:08:02+00:00SVG stands for Scalable Vector Graphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the 2D plane.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"datePublished":"2019-01-05T04:18:56-07:00","dateModified":"2019-01-05T04:18:56-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript | Design for Immersive Technologies","og:description":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScriptHTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript Marina Ferreira 2019-01-04T13:00:19+01:002019-01-04T18:08:02+00:00SVG stands for Scalable Vector Graphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the 2D plane.","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/","article:published_time":"2019-01-05T11:18:56+00:00","article:modified_time":"2019-01-05T11:18:56+00:00","twitter:card":"summary","twitter:title":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript | Design for Immersive Technologies","twitter:description":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScriptHTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript Marina Ferreira 2019-01-04T13:00:19+01:002019-01-04T18:08:02+00:00SVG stands for Scalable Vector Graphics and it is a standard XML-based markup language for vector graphics. It allows you to draw paths, curves, and shapes by determining a set of points in the 2D plane."},"aioseo_meta_data":{"post_id":"58292","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 23:21:22","updated":"2026-09-01 01:40:48","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript","link":"https:\/\/www.taterboy.com\/blog\/2019\/01\/html5-svg-fill-animation-with-css3-and-vanilla-javascript\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-fac","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/58292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=58292"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/58292\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=58292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=58292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=58292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}