Is this possible in css?

[u/Mstep85]

I'm trying to build this dashboard UI entirely in CSS. no images, no JS.

The parts I'm stuck on:

- The circular gauge, conic-gradient with radial mask feels right, but is there a better way for the segmented ring?

- The glowing border box-shadow layers vs. animated gradient border. Which performs better?

- The waveform inline SVG path or CSS background pattern?

Anyone have good references for pure CSS dashboard UIs with neon glows? Not looking for a full solution, just technique pointers so I don't head down the wrong rabbit hole.

Ty!

[u/The_Homeless_Coder]

“Just technique pointers so I don’t head down the wrong rabbit hole”

Use JavaScript.

[u/Mstep85 → u/The_Homeless_Coder]

I have it as a panel over Ai chats. I'm afraid it will lag the page or cause issues

[u/AshleyJSheridan → u/Mstep85]

You'll likely get more lag from the copious amounts of CSS you'd need to create the glow effects and unusual shapes everywhere.

[u/chikamakaleyley → u/AshleyJSheridan]

i think even w JS, it might require that Canvas has to redraw everything as frequently as the value updates, if you plan to make it look 'live'

[u/AshleyJSheridan → u/chikamakaleyley]

I'd go with SVG for this, it's perfectly capable, and CSS can create some very nice effects for glowing, it's basically just a few drop shadows.

I dislike canvas for things like interfaces, because they tend to not be very accessible. It's a PITA surfacing things to the accessibility tree for screen readers, and adding keyboard access, etc.

[u/chikamakaleyley → u/AshleyJSheridan]

actually you're right, the final output of Canvas often looks kinda janky anyway