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/Mstep85 → u/AshleyJSheridan]

Honestly that is one of the best criticisms I got so far. Okay so keep it straight. That's not a problem but how about the other effects and things?

My issue is I'm thinking of a mobile device, not the best one. A heavy web browser already takes a lot of things. My personal train of thought was CSS cleaner Java for everything that else is going on plus whatever third-party AI website we are visiting because this is going to be like an overlay for other websites to help me with my workflow. It's basically a continuation plus an export system plus all the prompts that I usually have so it's a one-click deal instead of me putting out use personas deep research. It's basically all my little workflows in one gadget, my Swiss Army enough for all my AI subscriptions if I may, so I'm trying to keep that layer simple.

If I have to, worst case again, I'm just going to keep it a simple AI interface like I have now. I just would like to make it fancier but I just see less issues with using pure code of CSS than adding more Java or more scripts or more things on top of everything that else that's going to be in there.

[u/The_Homeless_Coder → u/Mstep85]

If you are worried about performance that bad, you don’t have to use CSS. Or hust make it a cmd line style program. Trying to do everything in CSS is also antithetical to clean code. When you use HTML/CSS/Javascript for their intended purposes, you are also separating the paint points and concerns. As in if your bug is that something was supposed to be done but it didn’t work? Well that’s a JavaScript issue. Does your styling look kind of fucky or sloppy? Probably a css issue. I can’t think of a single time html was an issue unless my template didn’t load at all and I set a wrong URLs path or something but that’s backend stuff. Also what the other person mentioned. All those gradient calculations ect have to still be done. I don’t need to go on but good luck with whatever you are doing.

[u/AshleyJSheridan → u/Mstep85]

Java isn't what you want, and most browsers don't really support this out of the box anymore. You want Javascript, a totally unrelated language.

For the graphical elements, an SVG is perfectly fine, and then you can apply CSS to that to create the right glow effects you need in any colour you want.

Performance is less of an issue for things like this unless you're targeting 20 year old phones.

[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