Skip to content

Instantly share code, notes, and snippets.

@chadbaldwin

chadbaldwin/gauge.svg

Last active September 1, 2023 00:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chadbaldwin/57f34ffad0a1eaa11f44d83fea42cdf7 to your computer and use it in GitHub Desktop.
Save chadbaldwin/57f34ffad0a1eaa11f44d83fea42cdf7 to your computer and use it in GitHub Desktop.
Download ZIP
Simple gauge that can be generated and updated
Display the source blob
Display the rendered blob
Raw
gauge.svg
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox='0 0 72 36' class='gauge'>
<style>
.circle-bg {
fill: none;
stroke: #eee;
stroke-width: 7.6;
}
.circle {
fill: none;
stroke: green;
stroke-width: 5.6;
}
.percentage {
fill: #555;
font-family: sans-serif;
text-anchor: middle;
}
</style>
<path class='circle-bg' d='M 4 36 a 1 1 0 0 1 64 0' />
<path class='circle' d='M 4 36 a 1 1 0 0 1 64 0' stroke-dasharray='37, 64' />
<text x='36' y='32' class='percentage'>37%</text>
</svg>
@chadbaldwin
Copy link
Author

[reserving first comment]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment