Atmospheric Pressure Card

Atmospheric pressure is the weight of the air column above a specific point, caused by gravity acting on air molecules, and it decreases as altitude increases because there's less air above.

Card preview

Card description

Code

<!-- ================================================================ © 2026 IoT Data Visuals - Atmospheric Pressure 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>Atmospheric Pressure Card</title> <!-- Circle --> <circle cx="50" cy="50" r="35" stroke="#333" stroke-width="0.5"/> <!-- Needle --> <g id="pressure-needle-group" style="transform-origin: center; transform: rotate(0deg);"> <path d="M50 50 L40 30 L50 25 L60 30 Z" id="pressure-needle" fill-opacity="0.7"/> <circle cx="50" cy="50" r="2" fill="Grey" stroke="#333" stroke-width="0.5"/> </g> <!-- Telemetry --> <g id="telemetry" font-family="sans-serif" text-anchor="middle" fill="#333"> <text x="95" y="65" font-family="sans-serif" font-size="10px" text-anchor="end"> <tspan font-size="8px" font-weight="bold" fill="Grey" >PRESSURE</tspan> <tspan x="95" dy="10px" font-weight="bold"><tspan id="pressure-index"></tspan> <tspan id="pressure-mu"></tspan></tspan> <tspan x="92" dy="10px" id="pressure-label"></tspan> </text> </g> <!-- Labels degrees --> <g id="degree-labels" font-family="sans-serif" font-size="6px" text-anchor="middle" dominant-baseline="middle" fill="Grey"> <text transform="rotate(210, 50, 50)" x="50" y="7" fill="Black">950</text> <text transform="rotate(250, 50, 50)" x="50" y="7" fill="Black">970</text> <text transform="rotate(290, 50, 50)" x="50" y="7" fill="Black">990</text> <text transform="rotate(330, 50, 50)" x="50" y="7" fill="Black">1010</text> <text transform="rotate(10, 50, 50)" x="50" y="7" fill="Black">1030</text> <text transform="rotate(50, 50, 50)" x="50" y="7" fill="Black">1050</text> <text transform="rotate(90, 50, 48)" x="50" y="7" fill="Black">1070</text> </g> <!-- Tickers --> <g id="degree-labels"> <line transform="rotate(210,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="skyblue" stroke-width="1.5"/> <line transform="rotate(214,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(218,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(222,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(226,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(230,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="skyblue" stroke-width="1"/> <line transform="rotate(234,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(238,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(242,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(246,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(250,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="skyblue" stroke-width="1.5"/> <line transform="rotate(254,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(258,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(262,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(266,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(270,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="skyblue" stroke-width="1"/> <line transform="rotate(274,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(278,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(282,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(286,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(290,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="skyblue" stroke-width="1.5"/> <line transform="rotate(294,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(298,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(302,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(306,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Skyblue"/> <line transform="rotate(310,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="black" stroke-width="1"/> <line transform="rotate(314,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="grey"/> <line transform="rotate(318,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="grey"/> <line transform="rotate(322,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="grey"/> <line transform="rotate(326,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="grey"/> <line transform="rotate(330,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="black" stroke-width="1.5"/> <line transform="rotate(334,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="grey"/> <line transform="rotate(338,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="grey"/> <line transform="rotate(342,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="grey"/> <line transform="rotate(346,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="grey"/> <line transform="rotate(350,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="black" stroke-width="1"/> <line transform="rotate(354,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(358,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(2,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(6,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(10,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="limegreen" stroke-width="1.5"/> <line transform="rotate(14,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(18,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(22,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(26,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(30,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="limegreen" stroke-width="1"/> <line transform="rotate(34,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(38,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(42,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(46,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(50,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="limegreen" stroke-width="1.5"/> <line transform="rotate(54,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(58,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(62,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(66,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(70,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="Limegreen" stroke-width="1"/> <line transform="rotate(74,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(78,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(82,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(86,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Limegreen"/> <line transform="rotate(90,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="limegreen" stroke-width="1.5"/> </g> <!-- Card info link --> <a target="_blank" href="https://www.helpbus.online/page_20240705.php?product_id=16&topic_id=72" 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 pressureIndex = 1020.7; // Replace with the source of your data const pressureMeasureUnit = "hPa"; // Replace with the source of your data let pressureLabel = ""; const min = 950; const angle = 210 + ((pressureIndex - min)*2) ; const n = document.getElementById('pressure-needle-group'); n.style.transform = `rotate(${angle}deg)`; if (pressureIndex > 1020) { pressureLabel =`high`; pressureColor ='Limegreen'; } else if (pressureIndex > 1000) { pressureLabel =`normal`; pressureColor ='Grey'; } else { pressureLabel =`low`; pressureColor ='Skyblue'; } document.getElementById('pressure-label').setAttribute('fill', pressureColor); document.getElementById('pressure-needle').setAttribute('fill', pressureColor); document.getElementById('pressure-index').textContent = pressureIndex.toFixed(1); document.getElementById('pressure-mu').textContent = pressureMeasureUnit; document.getElementById('pressure-label').textContent = pressureLabel; </script>

Resources

Wikipedia: https://en.wikipedia.org/wiki/Atmospheric_pressure US National Oceanic and Atmospheric Administration: https://www.noaa.gov/jetstream/atmosphere/air-pressure IP2Location.com https://blog.ip2location.com/knowledge-base/what-is-atmospheric-pressure/