SVG Fuel Gauge

Developer
Kevin Haag
Size
2,758 Kb
Views
16,192
  1. SVG Fuel Gauge Previews
  2. SVG Fuel Gauge HTML Codes
  3. SVG Fuel Gauge CSS Codes
  4. SVG Fuel Gauge JS Codes

How do I make an svg fuel gauge?

What is a svg fuel gauge? How do you make a svg fuel gauge? This script and codes were developed by Kevin Haag on 29 November 2022, Tuesday.

SVG Fuel Gauge Previews
IQ Test

SVG Fuel Gauge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Fuel Gauge</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="gauge" viewBox="0 0 135 65" enable-background="new 0 0 135 65" xml:space="preserve" data-start="89" data-end="23" id="gauge-id"> <g> <circle fill="#ccc" cx="32.3" cy="48.3" r="1.5" /> <circle fill="#ccc" cx="39.7" cy="30.3" r="1.5" /> <circle fill="#ccc" cx="53.5" cy="16.5" r="1.5" /> <circle fill="#ccc" cx="71.6" cy="9" r="1.5" /> <circle fill="#ccc" cx="91.1" cy="9" r="1.5" /> <circle fill="#ccc" cx="109.1" cy="16.5" r="1.5" /> <circle fill="#ccc" cx="122.9" cy="30.3" r="1.5" /> <circle fill="#ccc" cx="130.3" cy="48.3" r="1.5" /> <circle fill="#aaa" cx="35.1" cy="38.9" r="2.5" /> <circle fill="#aaa" cx="46" cy="22.7" r="2.5" /> <circle fill="#aaa" cx="62.2" cy="11.9" r="2.5" /> <circle fill="#aaa" cx="81.5" cy="8" r="2.5" /> <circle fill="#aaa" cx="100.4" cy="11.9" r="2.5" /> <circle fill="#aaa" cx="117" cy="22.7" r="2.5" /> <circle fill="#aaa" cx="127.5" cy="38.9" r="2.5" /> <circle fill="#aaa" cx="131.3" cy="58.1" r="2.5" /> <g class="needle"> <line fill="none" stroke="#D95857" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="81.2" y1="58" x2="58" y2="58" /> <circle fill="#FFFFFF" stroke="#2B2436" stroke-width="3" stroke-miterlimit="10" cx="81.3" cy="58.1" r="5" /> </g> <g opacity="0.25"> <path fill="#2B2436" d="M14.9,21.4c0.2,0,0.4,0.1,0.6,0.2s0.2,0.4,0.2,0.6s-0.1,0.4-0.2,0.6s-0.3,0.2-0.6,0.2h-0.9v1.4 c0,1-0.3,1.8-1,2.6c-0.7,0.8-1.4,1.3-2.3,1.5v2.8H12c0,0,0.1,0,0.1,0s0.1,0,0.1,0s0.1,0,0.1,0c0,0,0,0.1,0,0.1v0.8 c0,0.2,0,0.3-0.1,0.5c-0.1,0.1-0.1,0.2-0.2,0.2h-2H3.5H1.4c-0.1,0-0.2-0.1-0.4-0.2c-0.2-0.2-0.3-0.3-0.3-0.4v-0.8 c0,0,0-0.1,0.1-0.1c0,0,0.1,0,0.1-0.1s0.1,0,0.2,0c0.1,0,0.1,0,0.2,0s0.1,0,0.1,0h1V20.3c0-0.4,0.4-0.6,1.1-0.6H10 c0.5,0,0.7,0.2,0.7,0.6v6.5c0.5-0.2,0.8-0.5,1.2-0.9c0.3-0.4,0.5-0.9,0.5-1.4V22c0-0.4,0.3-0.6,0.9-0.6H14.9z M4.1,21.4v2.5h5 v-2.5H4.1z M9.1,31.4v-5.8h-5v5.8H9.1z" /> </g> <path class="line2" fill="none" stroke="#bbb" stroke-width="6" stroke-linecap="round" d="M131.3,58.1	c0-27.6-22.4-50-50-50s-50,22.4-50,50" transform="scale(-1,1) translate(-162.7,0)"/> <path class="line" fill="none" stroke="#2B2436" stroke-width="6" stroke-linecap="round" d="M131.3,58.1	c0-27.6-22.4-50-50-50s-50,22.4-50,50" transform="scale(-1,1) translate(-162.7,0)"/> <g class="fuel_end" fill="#FFFFFF" stroke-miterlimit="10" transform="rotate(80, 81.3, 58.1)"> <circle stroke="#2B2436" stroke-width="3" cx="31" cy="58" r="6" /> <circle stroke="#231F20" cx="31" cy="58" r="2.5" /> </g> <circle class="fuel_start" fill="#FFFFFF" stroke="#bbb" stroke-width="2" stroke-miterlimit="10" cx="31" cy="58" r="3" transform="rotate(120, 81.3, 58.1)" /> </g> </svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Fuel Gauge - Script Codes CSS Codes

div{ width:240px; margin:100px auto;
}

SVG Fuel Gauge - Script Codes JS Codes

//Fuel End Line
function setCircleTo(target, percent)
{ var path = target.find('.line').get(0); var pathLen = path.getTotalLength(); var adjustedLen = percent * pathLen / 100; path.setAttribute('stroke-dasharray', adjustedLen+' '+pathLen);
}
function setStartTo(target, percent)
{ var path = target.find('.line2').get(0); var pathLen = path.getTotalLength(); var adjustedLen = percent * pathLen / 100; path.setAttribute('stroke-dasharray', adjustedLen+' '+pathLen);
}
//Fuel End Dot & Needle
function setLevelTo(target, percent)
{ var needle = target.find('.needle').get(0); var endDot = target.find('.fuel_end').get(0); var rotation = percent * 180 / 100; needle.setAttribute('transform', 'rotate('+rotation+', 81.3, 58.1)'); endDot.setAttribute('transform', 'rotate('+rotation+', 81.3, 58.1)');
}
//Fuel Start
function setStartLevelTo(target, percent)
{ var startDot = target.find('.fuel_start').get(0); var rotation = percent * 180 / 100; startDot.setAttribute('transform', 'rotate('+rotation+', 81.3, 58.1)');
}
function setGauge(target, fuelStart, fuelEnd){ setCircleTo(target, fuelEnd); setStartTo(target, fuelStart); setLevelTo(target, fuelEnd); setStartLevelTo(target, fuelStart);
}
//Initialize Gauge Function
setGauge($('#gauge-id'),65,35);
SVG Fuel Gauge - Script Codes
SVG Fuel Gauge - Script Codes
Home Page Home
Developer Kevin Haag
Username khaag
Uploaded November 29, 2022
Rating 3
Size 2,758 Kb
Views 16,192
Do you need developer help for SVG Fuel Gauge?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Haag (khaag) Script Codes
Name
Scroll Icon
Hamburger Icon Toggle
Hostwise Nav Bar
Vertical Centering
Animated Search Icon
Modal Popup Window
Youtube Layout
A Pen by Kevin Haag
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!