Skip to content

Instantly share code, notes, and snippets.

@postspectacular

postspectacular/svg-gauge.html

Last active November 28, 2024 08:21
Show Gist options
  • Save postspectacular/30c82cca3c1ab845e0c110e30575b81f to your computer and use it in GitHub Desktop.
Save postspectacular/30c82cca3c1ab845e0c110e30575b81f to your computer and use it in GitHub Desktop.
Download ZIP
Pure SVG based ASCII/UTF art gauge using patterns & symbols to define dither pattern "characters" based on ░▒▓█ (2KB minified, 616 bytes gzipped for entire doc, but only needs around 660 chars (uncompressed) per 24h gauge...)
Raw
svg-gauge.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>svg-gauge</title>
<style>
:root {
--gauge-col: #0c9;
--gauge-bg: #fff;
}
svg.gauge rect {
fill: var(--gauge-col);
}
svg.gauge rect.bg {
fill: var(--gauge-bg);
}
</style>
</head>
<body>
<svg class="gauge" width="18rem" height="1rem">
<defs>
<!-- define dither patterns based on UTF chars: ░▒▓█ -->
<!-- use `%` sizes to enable SVG scaling via browser text zoom -->
<pattern id="p1" viewBox="0 0 4 4" width="33.3%" height="25%">
<rect x="2" y="1" width="1" height="1" />
<rect y="3" width="1" height="1" />
</pattern>
<pattern id="p2" viewBox="0 0 2 2" width="16.6%" height="12.5%">
<rect width="1" height="1" />
<rect x="1" y="1" width="1" height="1" />
</pattern>
<pattern id="p3" viewBox="0 0 4 4" width="33.3%" height="25%">
<rect width="4" height="4" />
<rect x="2" y="1" width="1" height="1" class="bg" />
<rect y="3" width="1" height="1" class="bg" />
</pattern>
<pattern id="p4" viewBox="0 0 4 4" width="33.3%" height="25%">
<rect width="4" height="4" />
</pattern>
<!-- define virtual "character" symbols -->
<!-- character size based on 12x16 (should be multiples of 4), translated to rem's -->
<symbol id="s1">
<rect fill="url(#p1)" width="0.75rem" height="1rem" />
</symbol>
<symbol id="s2">
<rect fill="url(#p2)" width="0.75rem" height="1rem" />
</symbol>
<symbol id="s3">
<rect fill="url(#p3)" width="0.75rem" height="1rem" />
</symbol>
<symbol id="s4">
<rect fill="url(#p4)" width="0.75rem" height="1rem" />
</symbol>
</defs>
<!-- example visualization using above symbols -->
<g>
<use href="#s1" x="0" />
<use href="#s1" x="0.75rem" />
<use href="#s2" x="1.5rem" />
<use href="#s1" x="2.25rem" />
<use href="#s2" x="3rem" />
<use href="#s3" x="3.75rem" />
<use href="#s4" x="4.5rem" />
<use href="#s2" x="5.25rem" />
<use href="#s3" x="6rem" />
<use href="#s3" x="6.75rem" />
<use href="#s2" x="7.5rem" />
<use href="#s3" x="8.25rem" />
<use href="#s4" x="9rem" />
<use href="#s4" x="9.75rem" />
<use href="#s4" x="10.5rem" />
<use href="#s4" x="11.25rem" />
<use href="#s2" x="12rem" />
<use href="#s1" x="12.75rem" />
<use href="#s1" x="13.5rem" />
<use href="#s2" x="14.25rem" />
<use href="#s2" x="15rem" />
<use href="#s3" x="15.75rem" />
<use href="#s4" x="16.5rem" />
<use href="#s2" x="17.25rem" />
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment