UV Index Card

Card preview

Card description

Code

<!-- ================================================================ © 2026 IoT Data Visuals - UV Index Author: Algorhythm LLC Contact: iot_data_visuals@yahoo.com Project page: https://www.helpbus.online/product_index_20240705.php?product_id=16 License page: https://www.helpbus.online/page_20240705.php?product_id=16&topic_id=69 Version: 1.0.20251227 IMPORTANT: DO NOT REMOVE THIS COPYRIGHT NOTICE. ================================================================ Thank you for using our code ! ================================================================ --> <svg width="200" height="200" viewBox="0 0 100 100" fill="none" xmlns="www.w3.org"> <title>UV Index Card</title> <!-- Circle --> <circle cx="50" cy="50" r="35" stroke="#333" stroke-width="0.5"/> <g fill="none" stroke-width="6" transform="rotate(135 50 50)"> <circle cx="50" cy="50" r="30" pathLength="360" stroke="#67BF4C" stroke-dasharray="49 360" /> <circle cx="50" cy="50" r="30" pathLength="360" stroke="#FCBC24" stroke-dasharray="74 360" stroke-dashoffset="-49" /> <circle cx="50" cy="50" r="30" pathLength="360" stroke="#F76A35" stroke-dasharray="49 360" stroke-dashoffset="-123" /> <circle cx="50" cy="50" r="30" pathLength="360" stroke="#EE1549" stroke-dasharray="74 360" stroke-dashoffset="-172" /> <circle cx="50" cy="50" r="30" pathLength="360" stroke="#7C449B" stroke-dasharray="24 360" stroke-dashoffset="-246" /> </g> <!-- Telemetry --> <g id="telemetry" font-family="sans-serif" text-anchor="middle" fill="#333"> <text x="50" y="50" font-family="sans-serif" font-size="11px" text-anchor="middle"> <tspan font-weight="bold"> <tspan id="uv-index"></tspan> </tspan> <tspan x="50" dy="9px" font-size="8px" font-weight="bold" fill="Grey" >UV INDEX</tspan> </text> </g> <!-- Labels degrees --> <g font-family="sans-serif" font-size="7px" fill="#333" text-anchor="middle" dominant-baseline="middle"> <text x="20.3" y="79.7">0</text> <text x="10.7" y="64.7">1</text> <text x="8.1" y="47.1">2</text> <text x="13.1" y="29.9">3</text> <text x="24.8" y="16.5">4</text> <text x="40.8" y="9.0">5</text> <text x="59.2" y="9.0">6</text> <text x="75.2" y="16.5">7</text> <text x="86.9" y="29.9">8</text> <text x="91.9" y="47.1">9</text> <text x="89.3" y="64.7">10</text> <text x="81.7" y="79.7">11+</text> <text x="50" y="95" id="uv-label" font-size="9px" fill="Black"></text> </g> <!-- Index Dot --> <g id="needle-group" style="transform-origin: 50px 50px; transform: rotate(45deg); transition: transform 0.5s ease-out;"> <circle id="uv-indicator" cx="7" cy="50" r="3" stroke="white" stroke-width="0.5" /> </g> <!-- Card info link --> <a target="_blank" href="https://www.helpbus.online/page_20240705.php?topic_id=77&product_id=16" aria-label="More information on the component"> <text x="2" y="10" font-family="sans-serif" font-size="8px" fill="Grey" style="cursor: pointer;">ⓘ <title>Card info</title> </text> </a> </svg> <script> const uvIndex = 182; // Replace with the source of your data let uvLabel = ""; let uvColor = ""; if (uvIndex > 10) { uvLabel ="Extreme"; uvColor ="#7C449B"; } else if (uvIndex > 7) { uvLabel ="Very high"; uvColor ="#EE1549"; } else if (uvIndex > 5) { uvLabel ="High"; uvColor ="#F76A35"; } else if (uvIndex > 2) { uvLabel ="Moderate"; uvColor ="#FCBC24"; } else if (uvIndex > 0) { uvLabel ="Low risk"; uvColor ="#67BF4C"; } else { uvLabel ="No risk"; uvColor ="WhiteSmoke"; } document.getElementById('uv-index').textContent = uvIndex; document.getElementById('uv-label').textContent = uvLabel; document.getElementById('uv-indicator').setAttribute('fill', uvColor); let rotation = -45 + (Math.min(uvIndex, 11) * 24.54); if (uvIndex > 11) rotation += 12; document.getElementById('needle-group').style.transform = `rotate(${rotation}deg)`; </script>

Resources