Skip to content

Instantly share code, notes, and snippets.

@ILPlais

ILPlais/overall-risk.html

Created May 7, 2025 22:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ILPlais/be06b5237892d583a3bb5453e4ad7464 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ILPlais/be06b5237892d583a3bb5453e4ad7464 to your computer and use it in GitHub Desktop.
Download ZIP
Displays a dynamically editable gauge
Raw
overall-risk.html
<!DOCTYPE html>
<html>
<head>
<title>Overall Risk</title>
<style>
body {
background-color: white;
height: 100%;
margin: 10%;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="gaugeSVG" viewBox="0 0 400 250">
<!-- Gauge Arc Sections -->
<!-- Green Section (0-25%) -->
<path d="M 200 200 L 100 200 A 100 100 0 0 1 129.29 129.29 Z" fill="green" />
<!-- Yellow Section (25-50%) -->
<path d="M 200 200 L 129.29 129.29 A 100 100 0 0 1 200 100 Z" fill="yellow" />
<!-- Red Section (50-75%) -->
<path d="M 200 200 L 200 100 A 100 100 0 0 1 270.71 129.29 Z" fill="red" />
<!-- Black Section (75-100%) -->
<path d="M 200 200 L 270.71 129.29 A 100 100 0 0 1 300 200 Z" fill="black" />
<!-- Tick Marks -->
<g stroke="#333" stroke-width="2">
<!-- 0% -->
<line x1="100" y1="200" x2="105" y2="195" />
<!-- 25% -->
<line x1="129.29" y1="129.29" x2="134.29" y2="134.29" />
<!-- 50% -->
<line x1="200" y1="100" x2="200" y2="105" />
<!-- 75% -->
<line x1="270.71" y1="129.29" x2="265.71" y2="134.29" />
<!-- 100% -->
<line x1="300" y1="200" x2="295" y2="195" />
</g>
<!-- Labels -->
<text x="95" y="220" font-family="Arial" font-size="10" text-anchor="middle">0%</text>
<text x="129.29" y="120" font-family="Arial" font-size="10" text-anchor="middle">25%</text>
<text x="200" y="90" font-family="Arial" font-size="10" text-anchor="middle">50%</text>
<text x="270.71" y="120" font-family="Arial" font-size="10" text-anchor="middle">75%</text>
<text x="305" y="220" font-family="Arial" font-size="10" text-anchor="middle">100%</text>
<!-- Center Point -->
<circle cx="200" cy="200" r="5" fill="darkgray" />
<!-- Arrow -->
<g id="arrow" transform="rotate(0, 200, 200)">
<line x1="200" y1="200" x2="200" y2="120" stroke="#2F5597" stroke-width="3" />
<polygon points="200,110 195,125 205,125" fill="#2F5597" />
</g>
<!-- Percentage text -->
<text id="percentage" x="200" y="230" font-family="Arial" font-weight="bold" font-size="20" text-anchor="middle">50%</text>
</svg>
<input type="range" id="percentageValue" min="0" max="100" value="50">
<!-- TODO:
<button id="downloadBtn">Download as PNG</button>
-->
</body>
<script type="text/javascript">
<!-- Script to update the gauge -->
function updateGauge(value) {
// Convert percentage to angle
const angle = (value / 100) * 180;
const arrow = document.getElementById('arrow');
const percentageText = document.getElementById('percentage');
// Transform the arrow to the percentage
arrow.setAttribute('transform', `rotate(${angle - 90}, 200, 200)`);
// Set the percentage label
percentageText.textContent = `${value}%`;
}
// Set the event listener for the range input
const percentageInput = document.getElementById("percentageValue")
percentageInput.addEventListener("input", () => {
updateGauge(percentageInput.value)
})
// Update the gauge
updateGauge(percentageInput.value);
</script>
</html>
Display the source blob
Display the rendered blob
Raw
overall-risk.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="gaugeSVG" viewBox="0 0 400 250">
<title>Overall Risk</title>
<!-- Gauge Arc Sections -->
<!-- Green Section (0-25%) -->
<path d="M 200 200 L 100 200 A 100 100 0 0 1 129.29 129.29 Z" fill="green" />
<!-- Yellow Section (25-50%) -->
<path d="M 200 200 L 129.29 129.29 A 100 100 0 0 1 200 100 Z" fill="yellow" />
<!-- Red Section (50-75%) -->
<path d="M 200 200 L 200 100 A 100 100 0 0 1 270.71 129.29 Z" fill="red" />
<!-- Black Section (75-100%) -->
<path d="M 200 200 L 270.71 129.29 A 100 100 0 0 1 300 200 Z" fill="black" />
<!-- Tick Marks -->
<g stroke="#333" stroke-width="2">
<!-- 0% -->
<line x1="100" y1="200" x2="105" y2="195" />
<!-- 25% -->
<line x1="129.29" y1="129.29" x2="134.29" y2="134.29" />
<!-- 50% -->
<line x1="200" y1="100" x2="200" y2="105" />
<!-- 75% -->
<line x1="270.71" y1="129.29" x2="265.71" y2="134.29" />
<!-- 100% -->
<line x1="300" y1="200" x2="295" y2="195" />
</g>
<!-- Labels -->
<text x="95" y="220" font-family="Arial" font-size="10" text-anchor="middle">0%</text>
<text x="129.29" y="120" font-family="Arial" font-size="10" text-anchor="middle">25%</text>
<text x="200" y="90" font-family="Arial" font-size="10" text-anchor="middle">50%</text>
<text x="270.71" y="120" font-family="Arial" font-size="10" text-anchor="middle">75%</text>
<text x="305" y="220" font-family="Arial" font-size="10" text-anchor="middle">100%</text>
<!-- Center Point -->
<circle cx="200" cy="200" r="5" fill="darkgray" />
<!-- Arrow -->
<g id="arrow" transform="rotate(0, 200, 200)">
<line x1="200" y1="200" x2="200" y2="120" stroke="#2F5597" stroke-width="3" />
<polygon points="200,110 195,125 205,125" fill="#2F5597" />
</g>
<!-- Percentage text -->
<text id="percentage" x="200" y="230" font-family="Arial" font-weight="bold" font-size="20" text-anchor="middle">50%</text>
<script type="text/javascript"><![CDATA[
<!-- Script to update the gauge -->
function updateGauge(value) {
// Convert percentage to angle
const angle = (value / 100) * 180;
const arrow = document.getElementById('arrow');
const percentageText = document.getElementById('percentage');
// Transform the arrow to the percentage
arrow.setAttribute('transform', `rotate(${angle - 90}, 200, 200)`);
// Set the percentage label
percentageText.textContent = `${value}%`;
}
// Update the gauge
updateGauge(29.5);
]]></script>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment