{"id":26503,"date":"2016-05-24T23:01:24","date_gmt":"2016-05-24T15:01:24","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26503"},"modified":"2018-04-09T17:00:02","modified_gmt":"2018-04-09T09:00:02","slug":"svg-meter-gauge-tutorial","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/","title":{"rendered":"How to Make an Animated SVG Speedometer"},"content":{"rendered":"

A gauge meter<\/strong> is a tool that visually indicates a value within a given range. In computers, a \u201cdisk space indicator\u201d uses a gauge meter to show how much disk space is used from the total available. Gauges have zones or regions across its range, each differentiated by its own color. In front-end development, we can use the <meter><\/a><\/code> HTML5 tag to display data within a specific range.<\/p>\n

In this post, we\u2019ll make an SVG gauge meter of semi-circular shape<\/strong>, and animate it. Take a look at this preview GIF that shows how the final version will work in Firefox<\/strong>:<\/p>\n

The meter\u2019s range is 0-100<\/strong>, and it displays three equal zones<\/strong> in yellow, blue and red. You can change the range and the number of the zones according to your needs.<\/p>\n

For explanation purposes, I\u2019ll perform manual calculations, and use inline SVG attributes\/properties in the following steps.<\/p>\n

\"Demo<\/figure>\n

My final demo, however, uses CSS and JavaScript for the calculation and insertion of SVG properties in order to make it more flexible.<\/p>\n

1. Draw a circle<\/h2>\n

Let\u2019s draw a simple circle in SVG. HTML5\u2019s new <svg><\/a><\/code> tag allows us to add SVG right into the HTML code. Inside the <svg><\/code> tag, we add the <circle><\/a><\/code> SVG shape like this:<\/p>\n

\r\n<div id=\"wrapper\">\r\n  <svg id=\"meter\">\r\n    <circle r=\"150\" cx=\"50%\" cy=\"50%\"><\/circle>\r\n  <\/svg>\r\n<\/div><\/pre>\n
\"A<\/figure>\n
In CSS, let\u2019s add width<\/code> and height<\/code> properties to the wrapper, both greater than or equal to the diameter of the circle (it\u2019s 300px in our example). We also need to set the width and height of the #meter<\/code> element to 100%.<\/p>\n
\r\n#wrapper{\r\n  width: 400px;\r\n  height: 400px;\r\n}\r\n\r\n#meter{\r\n  width: 100%;\r\n  height: 100%;\r\n}<\/pre>\n
2. Add outline to the circle and remove fill<\/h2>\n
With the help of the stroke<\/code> and stroke-width<\/code><\/a> SVG properties we add an outline to the circle, and by using the fill=\"none\"<\/code> property we remove the circle\u2019s fill as well.<\/p>\n
\r\n<circle id=\"low\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#FDE47F\"\r\nstroke-width=\"60\" fill=\"none\"><\/circle><\/pre>\n
\"A<\/figure>\n
3. cover only half of the circle<\/h2>\n
The stroke-dasharray<\/code><\/a> SVG property creates a dashed outline, and takes two values, dash length<\/code> and gap length<\/code>.<\/p>\n
For the semi-circle outline, the dash length<\/code> value needs be equal to the circle\u2019s semi-circumference, so that the dash covers half of the circle\u2019s circumference, and the gap length<\/code> value needs be either equal to or more than the remaining circumference.<\/p>\n
When it\u2019s more, it will be converted to the remaining circumference by the browser, hence we will use the full circumference value for the gap length<\/code>. This way we can avoid calculating the remaining circumference.<\/p>\n
Let\u2019s see the calculations:<\/p>\n
circumference<\/mi> =<\/mo> 2<\/mn> \u00c3-<\/mo> \u03c0<\/mi> \u00d7<\/mo> r<\/mi><\/mrow><\/math><\/p>\n
where r<\/strong> is the radius. For a radius of 150, the circumference is:<\/p>\n
circumference<\/mi> =<\/mo> 2<\/mn> \u00c3-<\/mo> \u03c0<\/mi> \u00d7<\/mo> 150<\/mi><\/mrow><\/mtr>circumference<\/mi> =<\/mo> 942.48<\/mn><\/mrow><\/mtr><\/mtable><\/math><\/p>\n
If we divide it by 2, we get 471.24 for semi-circumference, so the value of the stroke-dasharray<\/code> property for a semi-circle outline in a 150 radius circle is 471, 943<\/code>. This semi circle will be used to denote the Low Range Zone of the meter.<\/p>\n
\r\n<!-- Low Range Zone (Yellow) -->\r\n<circle id=\"low\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#FDE47F\"\r\nstroke-width=\"60\" stroke-dasharray=\"471, 943\" fill=\"none\">\r\n<\/circle><\/pre>\n
\"An<\/figure>\n
As can you see, it\u2019s upside down, so let\u2019s turn the SVG up by adding the transform<\/a><\/code> CSS property with the value of rotateX(180deg)<\/code> to the <svg id=\"meter\"><\/code> HTML element.<\/p>\n
\r\n#meter {\r\n  transform: rotateX(180deg);\r\n}<\/pre>\n
\"A<\/figure>\n
4. Add the other zones<\/h2>\n
The middle zone<\/strong> (blue) has to cover the \u2154 portion of the semi-circle, and \u2154  of 471 is 314. So, let\u2019s add another circle to our SVG by using the stroke-dasharray<\/code> property again, but now with the value of 314, 943<\/code>.<\/p>\n
\r\n<!-- Low Range Zone (Yellow) -->\r\n<circle id=\"low\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#FDE47F\"\r\nstroke-width=\"60\" stroke-dasharray=\"471, 943\" fill=\"none\"><\r\n\/circle>\r\n\r\n<!-- Average Range Zone (Blue) -->\r\n<circle id=\"avg\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#7CCCE5\"\r\nstroke-width=\"60\" stroke-dasharray=\"314, 943\"\r\nfill=\"none\"><\/circle><\/pre>\n
\"avg<\/figure>\n
The final zone<\/strong> (red) has to cover the last \u2153 part of the semi-circle, and \u2153 of 471 is 157, so we will add this value to the stroke-dasharray<\/code> property of the third circle.<\/p>\n
\r\n<!-- Low Range Zone (Yellow) -->\r\n<circle id=\"low\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#FDE47F\"\r\nstroke-width=\"60\" stroke-dasharray=\"471, 943\" fill=\"none\">\r\n<\/circle>\r\n\r\n<!-- Average Range Zone (Blue) -->\r\n<circle id=\"avg\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#7CCCE5\"\r\nstroke-width=\"60\" stroke-dasharray=\"314, 943\" fill=\"none\">\r\n<\/circle>\r\n\r\n<!-- High Range Zone (Red) -->\r\n<circle id=\"high\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#E04644\"\r\nstroke-width=\"60\" stroke-dasharray=\"157, 943\" fill=\"none\">\r\n<\/circle><\/pre>\n
\"high<\/figure>\n
5. Add The Meter Outline<\/h2>\n
Let\u2019s add a grey outline to the meter in order to make it look better. The dash length<\/code> of the outline circle needs to be equal to the semi-circumference. We  place it before all the other circles in the code, so that it will be rendered first by the browser<\/strong>, and therefore will be displayed beneath the region circles<\/strong> on the screen.<\/p>\n
The stroke-width<\/code> property needs to be a little bit greater than that of the other circles, in order to give the appearance of a real outline.<\/p>\n
\r\n<!-- Meter Outline (Grey) -->\r\n<circle id=\"outline_curves\" r=\"150\" cx=\"50%\" cy=\"50%\"\r\nstroke=\"#f6f6f6\" stroke-width=\"65\"\r\nstroke-dasharray=\"471, 943\" fill=\"none\">\r\n<\/circle>\r\n\r\n<!-- Low Range Zone (Yellow) -->\r\n<circle id=\"low\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#FDE47F\"\r\nstroke-width=\"60\" stroke-dasharray=\"471, 943\" fill=\"none\"><\r\n\/circle>\r\n\r\n<!-- Average Range Zone (Blue) -->\r\n<circle id=\"avg\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#7CCCE5\"\r\nstroke-width=\"60\" stroke-dasharray=\"314, 943\" fill=\"none\">\r\n<\/circle>\r\n\r\n<!-- High Range Zone (Red) -->\r\n<circle id=\"high\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#E04644\"\r\nstroke-width=\"60\" stroke-dasharray=\"157, 943\" fill=\"none\">\r\n<\/circle><\/pre>\n
Outline Ends<\/strong><\/p>\n
As the outline doesn\u2019t cover the ends of the semi-circle, we also add 2 lines of about 2px to the ends by adding another circle with a dash length<\/code> of 2px and a gap length<\/code> of the semi-circumference minus 2px. Therefore the value of the stroke-dasharray<\/code> property of this circle is 2, 469<\/code>.<\/p>\n
\r\n<!-- Outline Ends (Grey) -->\r\n<circle id=\"outline_ends\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#f9f9f9\"\r\nstroke-width=\"65\" stroke-dasharray=\"2, 469\" fill=\"none\"><\/circle><\/pre>\n
Mask<\/strong><\/p>\n
Now let\u2019s add another circle after the low, average, and high range zones. The new circle will function as a mask to hide the unnecessary zone regions when the gauge meter will be operated.<\/p>\n
Its properties will be the same as those of the outline circle, and its stroke color will also be grey. The mask will later be resized with Javascript to reveal the zones beneath it in response to an input slider.<\/p>\n
The combined code so far is as below.<\/p>\n
\r\n<!-- Meter Outline -->\r\n<circle id=\"outline_curves\" r=\"150\" cx=\"50%\" cy=\"50%\"\r\nstroke=\"#f6f6f6\" stroke-width=\"65\"\r\nstroke-dasharray=\"471, 943\" fill=\"none\">\r\n<\/circle>\r\n\r\n<!-- Low Range Zone (Yellow) -->\r\n<circle id=\"low\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#FDE47F\"\r\nstroke-width=\"60\" stroke-dasharray=\"471, 943\" fill=\"none\">\r\n<\/circle>\r\n\r\n<!-- Average Range Zone (Blue) -->\r\n<circle id=\"avg\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#7CCCE5\"\r\nstroke-width=\"60\" stroke-dasharray=\"314, 943\" fill=\"none\">\r\n<\/circle>\r\n\r\n<!-- High Range Zone (Red) -->\r\n<circle id=\"high\"  r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#E04644\"\r\nstroke-width=\"60\" stroke-dasharray=\"157, 943\" fill=\"none\">\r\n<\/circle>\r\n\r\n<!-- Mask -->\r\n<circle id=\"mask\" r=\"150\" cx=\"50%\" cy=\"50%\" stroke=\"#f6f6f6\"\r\nstroke-width=\"65\" stroke-dasharray=\"471, 943\" fill=\"none\">\r\n<\/circle>\r\n\r\n<!-- Outline Ends -->\r\n<circle id=\"outline_ends\" r=\"150\" cx=\"50%\" cy=\"50%\"\r\nstroke=\"#f9f9f9\" stroke-width=\"65\" stroke-dasharray=\"2, 469\"\r\nfill=\"none\">\r\n<\/circle><\/pre>\n
\"masked<\/figure>\n
If we want to reveal a region under the mask, we need to reduce the size of the mask\u2019s dash length<\/code>. For instance, when the value of the stroke-dasharray<\/code> property of the mask circle is 157, 943<\/code>, the arcs will stand in the following state:<\/p>\n
\"masked<\/figure>\n
So, all we have to do now is to adjust the stroke-dasharray<\/code> of the mask using JavaScript for animation. But before we do that, as I mentioned before, for my final demo I used CSS and JavaScript to calculate and add most of the SVG properties.<\/p>\n
Below you can find the HTML, CSS, and JavaScript code that leads to the same result as above.<\/p>\n
HTML<\/h2>\n
I added a needle image (gauge-needle.svg<\/code>), a range slider (input#slider<\/code>) to the user input, and a label (label#lbl<\/code>) to display the slider value in the range of 0-100.<\/p>\n
<div id=\"wrapper\">\r\n    <svg id=\"meter\">\r\n        <circle id=\"outline_curves\" class=\"circle outline\"  \r\n        cx=\"50%\" cy=\"50%\"><\/circle>\r\n        \r\n        <circle id=\"low\" class=\"circle range\" cx=\"50%\" cy=\"50%\" \r\n        stroke=\"#FDE47F\"><\/circle>\r\n        \r\n        <circle id=\"avg\" class=\"circle range\" cx=\"50%\" cy=\"50%\" \r\n        stroke=\"#7CCCE5\"><\/circle>\r\n        \r\n        <circle id=\"high\" class=\"circle range\" cx=\"50%\" cy=\"50%\" \r\n        stroke=\"#E04644\"><\/circle>\r\n        \r\n        <circle id=\"mask\" class=\"circle\" cx=\"50%\" cy=\"50%\" >\r\n        <\/circle>\r\n        \r\n        <circle id=\"outline_ends\" class=\"circle outline\" \r\n        cx=\"50%\" cy=\"50%\"><\/circle>\r\n    <\/svg>\r\n    <img id=\"meter_needle\" src=\"gauge-needle.svg\" alt=\"\">\r\n    <input id=\"slider\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" \/>\r\n    <label id=\"lbl\" id=\"value\" for=\"\">0<\/label>\r\n<\/div>\r\n<\/pre>\n
CSS<\/h2>\n
The CSS code below adds style rules to the SVG, as SVG shapes can be styled the same way as HTML elements. If you want to read more on how to style SVG with CSS, take a look at this post<\/a>. For styling the slider, check out this post<\/a>.<\/p>\n
\r\n#wrapper {\r\n  position: relative;\r\n  margin: auto;\r\n}\r\n#meter {\r\n  width: 100%; height: 100%;\r\n  transform: rotateX(180deg);\r\n}\r\n.circle {\r\n  fill: none;\r\n}\r\n.outline, #mask {\r\n  stroke: #F1F1F1;\r\n  stroke-width: 65;\r\n}\r\n.range {\r\n  stroke-width: 60;\r\n}\r\n#slider, #lbl {\r\n  position: absolute;\r\n}\r\n#slider {\r\n  cursor: pointer;\r\n  left: 0;\r\n  margin: auto;\r\n  right: 0;\r\n  top: 58%;\r\n  width: 94%;\r\n}\r\n#lbl {\r\n  background-color: #4B4C51;\r\n  border-radius: 2px;\r\n  color: white;\r\n  font-family: 'courier new';\r\n  font-size: 15pt;\r\n  font-weight: bold;\r\n  padding: 4px 4px 2px 4px;\r\n  right: -48px;\r\n  top: 57%;\r\n}\r\n#meter_needle {\r\n  height: 40%;\r\n  left: 0;\r\n  margin: auto;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 10%;\r\n  transform-origin: bottom center;\r\n  \/*orientation fix*\/\r\n  transform: rotate(270deg);\r\n}<\/pre>\n
JavaScript<\/h2>\n
In the JavaScript, first we calculate and set the dimensions of the wrapper and all arcs, then we add the appropriate stroke-dasharray<\/code> values to the circles. After that, we will be binding a custom event to the range slider in order to perform the animation.<\/p>\n
\r\n\/* Set radius for all circles *\/\r\nvar r = 250;\r\nvar circles = document.querySelectorAll('.circle');\r\nvar total_circles = circles.length;\r\nfor (var i = 0; i < total_circles; i++) {\r\n    circles[i].setAttribute('r', r);\r\n}\r\n\r\n\/* Set meter's wrapper dimension *\/\r\nvar meter_dimension = (r * 2) + 100;\r\nvar wrapper = document.querySelector(\"#wrapper\");\r\nwrapper.style.width = meter_dimension + \"\";\r\nwrapper.style.height = meter_dimension + \"\";\r\n\r\n\/* Add strokes to circles  *\/\r\nvar cf = 2 * Math.PI * r;\r\nvar semi_cf = cf \/ 2;\r\nvar semi_cf_1by3 = semi_cf \/ 3;\r\nvar semi_cf_2by3 = semi_cf_1by3 * 2;\r\ndocument.querySelector(\"#outline_curves\")\r\n    .setAttribute(\"stroke-dasharray\", semi_cf + \",\" + cf);\r\ndocument.querySelector(\"#low\")\r\n    .setAttribute(\"stroke-dasharray\", semi_cf + \",\" + cf);\r\ndocument.querySelector(\"#avg\")\r\n    .setAttribute(\"stroke-dasharray\", semi_cf_2by3 + \",\" + cf);\r\ndocument.querySelector(\"#high\")\r\n    .setAttribute(\"stroke-dasharray\", semi_cf_1by3 + \",\" + cf);\r\ndocument.querySelector(\"#outline_ends\")\r\n    .setAttribute(\"stroke-dasharray\", 2 + \",\" + (semi_cf - 2));\r\ndocument.querySelector(\"#mask\")\r\n    .setAttribute(\"stroke-dasharray\", semi_cf + \",\" + cf);\r\n\r\n\/* Bind range slider event*\/\r\nvar slider = document.querySelector(\"#slider\");\r\nvar lbl = document.querySelector(\"#lbl\");\r\nvar mask = document.querySelector(\"#mask\");\r\nvar meter_needle =  document.querySelector(\"#meter_needle\");\r\n\r\nfunction range_change_event() {\r\n    var percent = slider.value;\r\n    var meter_value = semi_cf - ((percent * semi_cf) \/ 100);\r\n    mask.setAttribute(\"stroke-dasharray\", meter_value + \",\" + cf);\r\n    meter_needle.style.transform = \"rotate(\" + \r\n        (270 + ((percent * 180) \/ 100)) + \"deg)\";\r\n    lbl.textContent = percent + \"%\";\r\n}\r\nslider.addEventListener(\"input\", range_change_event);\r\n<\/pre>\n
The Custom range_change_event()<\/code> Function<\/h2>\n
The behaviour of the meter is performed by the range_change_event()<\/code> custom function that is responsible for the adjustment of the mask size and the animation of the needle.<\/p>\n
It takes the slider value (user input) which\u2019s between 0-100, converts it to the semi-circumference equivalent (meter_value<\/code>) of a value between 471-0 (471 is the semi-circumference for radius 150), and sets that meter_value<\/code> as the dash length<\/code> of the mask\u2019s stroke-dasharray<\/code> property.<\/p>\n
The range_change_event()<\/code> custom function also rotates the needle after converting the user input (coming in the 0-100 range) to its degree equivalent of 0-180.<\/p>\n
270\u00b0 is added to the needle\u2019s rotation in the above code because the image I used is of an upright needle and I had to initially rotate it 270\u00b0 to make it lie flat to its left.<\/p>\n
Finally, I bound the range_change_event()<\/code> function to the range slider, so that the gauge meter can be operated with it.<\/p>\n
Check out the demo<\/strong><\/a> or take a look at the source code at our Github repository<\/strong><\/a>.<\/p>\n
Read more: <\/strong>Click here to check out more SVG animations<\/a><\/p>","protected":false},"excerpt":{"rendered":"
A gauge meter is a tool that visually indicates a value within a given range. In computers, a \u201cdisk space indicator\u201d uses a gauge meter to show how much disk space is used from the total available. Gauges have zones or regions across its range, each differentiated by its own color. In front-end development, we…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,3498,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Create an SVG Gauge Meter Animation<\/title>\n<meta name=\"description\" content=\"A gauge meter is a tool that visually indicates a value within a given range. In computers, a "disk space indicator" uses a gauge meter to show how much\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make an Animated SVG Speedometer\" \/>\n<meta property=\"og:description\" content=\"A gauge meter is a tool that visually indicates a value within a given range. In computers, a "disk space indicator" uses a gauge meter to show how much\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-24T15:01:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T09:00:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/svg-meter-gauge-tutorial\/svg-meter-gif.gif\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Make an Animated SVG Speedometer\",\"datePublished\":\"2016-05-24T15:01:24+00:00\",\"dateModified\":\"2018-04-09T09:00:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/\"},\"wordCount\":1143,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/svg-meter-gauge-tutorial\\\/svg-meter-gif.gif\",\"keywords\":[\"CSS\",\"CSS Animation\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/\",\"name\":\"How to Create an SVG Gauge Meter Animation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/svg-meter-gauge-tutorial\\\/svg-meter-gif.gif\",\"datePublished\":\"2016-05-24T15:01:24+00:00\",\"dateModified\":\"2018-04-09T09:00:02+00:00\",\"description\":\"A gauge meter is a tool that visually indicates a value within a given range. In computers, a \\\"disk space indicator\\\" uses a gauge meter to show how much\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/svg-meter-gauge-tutorial\\\/svg-meter-gif.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/svg-meter-gauge-tutorial\\\/svg-meter-gif.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/svg-meter-gauge-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Make an Animated SVG Speedometer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create an SVG Gauge Meter Animation","description":"A gauge meter is a tool that visually indicates a value within a given range. In computers, a \"disk space indicator\" uses a gauge meter to show how much","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:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"How to Make an Animated SVG Speedometer","og_description":"A gauge meter is a tool that visually indicates a value within a given range. In computers, a \"disk space indicator\" uses a gauge meter to show how much","og_url":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-05-24T15:01:24+00:00","article_modified_time":"2018-04-09T09:00:02+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/svg-meter-gauge-tutorial\/svg-meter-gif.gif","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Make an Animated SVG Speedometer","datePublished":"2016-05-24T15:01:24+00:00","dateModified":"2018-04-09T09:00:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/"},"wordCount":1143,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/svg-meter-gauge-tutorial\/svg-meter-gif.gif","keywords":["CSS","CSS Animation","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/","url":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/","name":"How to Create an SVG Gauge Meter Animation","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/svg-meter-gauge-tutorial\/svg-meter-gif.gif","datePublished":"2016-05-24T15:01:24+00:00","dateModified":"2018-04-09T09:00:02+00:00","description":"A gauge meter is a tool that visually indicates a value within a given range. In computers, a \"disk space indicator\" uses a gauge meter to show how much","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/svg-meter-gauge-tutorial\/svg-meter-gif.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/svg-meter-gauge-tutorial\/svg-meter-gif.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/svg-meter-gauge-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Make an Animated SVG Speedometer"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Tt","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26503"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26503\/revisions"}],"predecessor-version":[{"id":39195,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26503\/revisions\/39195"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26503"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}