Precipitation Card

Card preview

Card description

Code

<!-- ================================================================ © 2026 IoT Data Visuals - Precipitation 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>Precipitation Card</title> <defs> <!-- Water level --> <linearGradient id="liquid-fill" x1="0" x2="0" y1="1" y2="0"> <stop id="stop-filled" offset="40%" stop-color="lightskyblue" /> <stop id="stop-empty" offset="40%" stop-color="white" /> </linearGradient> </defs> <!-- Water drop --> <path d="M50 10 C50 10 25 37 25 53 A25 25 0 1 0 75 53 C75 37 50 10 50 10 Z" fill="url(#liquid-fill)" stroke="cornflowerblue" stroke-width="1"/> <!-- Telemetry --> <g id="telemetry" font-family="sans-serif"> <text x="90" y="18" font-size="9px" font-weight="bold" fill="Black" text-anchor="end"> <tspan id="precipitation-index">--</tspan> <tspan id="precipitation-mu" x="90" dy="10px"></tspan> </text> <text x="50" y="90" font-size="8px" font-weight="bold" fill="Grey" text-anchor="middle" letter-spacing="0.5"> PRECIPITATION </text> </g> <!-- Card info link --> <a target="_blank" href="https://www.helpbus.online/page_20240705.php?topic_id=75&product_id=16" aria-label="More information on the component"> <text x="80" y="75" font-family="sans-serif" font-size="8px" fill="Grey" style="cursor: pointer;">ⓘ <title>Card info</title> </text> </a> </svg> <script> const precipitationIndex = 5.1; // Replace with the source of your data const precipitationMeasureUnit = "mm"; // Replace with the source of your data const maxPrecipitation = 50; // Calculate percentage const percentage = (precipitationIndex / maxPrecipitation) * 100; document.getElementById('stop-filled').setAttribute('offset', percentage + '%'); document.getElementById('stop-empty').setAttribute('offset', percentage + '%'); document.getElementById('precipitation-index').textContent = precipitationIndex; document.getElementById('precipitation-mu').textContent = precipitationMeasureUnit; </script>

Resources