I was asked for a gauge some day.
Got a sketch also with simple guides:
Would be nice if the display is like led ribbon but wavy
If value is below threshold, should display red
So let's try to bend the ribbon then
[{"id":"3006c9ca80d58e2f","type":"ui_template","z":"02ca79a9a08a0cf4","group":"340d31f212ce5a97","name":"Curved Gauge","order":0,"width":"6","height":"2","format":"<div class=\"lg-txt\"><span id=\"{{'val_'+$id}}\" class=\"lg-value\"></span><span class=\"lg-unit\">units</span></div>\n<div id=\"{{'lg_'+$id}}\" class=\"lg-gauge lg-clipped\">\n <div class=\"lg-stripe lg-dim\"></div>\n <div id=\"{{'stripe_'+$id}}\" class=\"lg-stripe lg-glow \"></div>\n</div>\n\n<script>\n (function(scope) {\n const min = -50;\n const max = 300;\n const setpoint = 50;\n const ok = 150;\n const bad = 30;\n scope.$watch('msg', function(msg) {\n if (msg) {\n const h = msg.payload > setpoint ? ok : bad; //hue value \n const v = Math.floor(((msg.payload - min) / (max - min)) * 100);\n document.getElementById('lg_'+scope.$id).style.setProperty('--lg-hue', h);\n document.getElementById('stripe_'+scope.$id).style.width = v + \"%\"; \n document.getElementById('val_'+scope.$id).innerText = msg.payload; \n } \n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":720,"y":700,"wires":[[]]},{"id":"314c6b978935f783","type":"inject","z":"02ca79a9a08a0cf4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":350,"y":700,"wires":[["90fdec69f70a4c62"]]},{"id":"90fdec69f70a4c62","type":"function","z":"02ca79a9a08a0cf4","name":"random","func":"msg.payload = Math.floor(Math.random() * 350) - 50\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":700,"wires":[["3006c9ca80d58e2f"]]},{"id":"3af0fb04233893f5","type":"ui_template","z":"02ca79a9a08a0cf4","group":"9a0dc7b8658081f5","name":"curved gague CSS","order":2,"width":0,"height":0,"format":"<style>\n .lg-clipped {\n clip-path: polygon(100% 100%, 0% 100%, 0% 83.59%, 2% 83.5%, 4% 83.24%, 6% 82.79%, 8% 82.17%, 10% 81.38%, 12% 80.42%, 14% 79.3%, 16% 78.01%, 18% 76.57%, 20% 74.98%, 22% 73.25%, 24% 71.39%, 26% 69.4%, 28% 67.29%, 30% 65.07%, 32% 62.76%, 34% 60.35%, 36% 57.86%, 38% 55.31%, 40% 52.7%, 42% 50.04%, 44% 47.35%, 46% 44.63%, 48% 41.9%, 50% 39.17%, 52% 36.45%, 54% 33.76%, 56% 31.1%, 58% 28.48%, 60% 25.92%, 62% 23.43%, 64% 21.02%, 66% 18.7%, 68% 16.47%, 70% 14.35%, 72% 12.35%, 74% 10.48%, 76% 8.74%, 78% 7.14%, 80% 5.69%, 82% 4.39%, 84% 3.25%, 86% 2.28%, 88% 1.47%, 90% 0.84%, 92% 0.38%, 94% 0.1%, 96% 0%, 98% 0.08%, 100% 0.33%);\n }\n\n .lg-gauge {\n --lg-hue: 220;\n --lg-l: 50%;\n --color: oklch(70% 0.3 var(--lg-hue));\n --dim: oklch(43% 0.18 var(--lg-hue));\n --col: var(--color);\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .lg-stripe {\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(90deg, var(--col), var(--col) 2px, 2px, transparent 4px);\n }\n\n .lg-dim {\n --col: var(--dim);\n position: absolute;\n }\n\n .lg-glow {\n --col: var(--color);\n position: absolute;\n transition: 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);\n filter: drop-shadow(0px 0px 5px var(--col));\n }\n\n .lg-txt {\n left: 10%;\n top: 5%;\n font-size: 2em;\n position: absolute;\n }\n\n .lg-value {\n font-size: 1.2em;\n font-weight: 600;\n }\n\n .lg-unit {\n font-size: 0.5em;\n padding-left: 0.25em;\n vertical-align: top;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":730,"y":660,"wires":[[]]},{"id":"340d31f212ce5a97","type":"ui_group","name":"Curved Gauge","tab":"588b215f2b5ee2be","order":4,"disp":true,"width":"6","collapse":false,"className":""},{"id":"9a0dc7b8658081f5","type":"ui_group","name":"Pick","tab":"588b215f2b5ee2be","order":1,"disp":true,"width":"4","collapse":true,"className":""},{"id":"588b215f2b5ee2be","type":"ui_tab","name":"Colors","icon":"dashboard","disabled":false,"hidden":false}]
Here's the wave generator to make nice curves for clip-path polygon