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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment