Dynamische HTML Seite entwerfen --> Geht das überhaupt?

[Contor]

Hallo Community,
ich hoffe es finden sich unter euch Leute die mir ein paar Anregungen geben können.

Ich möchte beispielsweise folgendes Bild auf einer HTML Website darstellen und dynamisieren.



Wie stelle ich mir die Dynamisierung vor? Zunächst sollen sich beispielsweise die grünen Striche farblich verändern, wenn ein bestimmtes Bit gesetzt wurde. Die Schalter sollen einmal sichtbar sein bzw. unsichtbar wenn bestimmte Bedingungen vorliegen usw.

Nun zu meiner Frage geht sowas überhaupt im Browser? HTML;CSS,JS oder PHP? Ich würde gern ein paar Ideen von euch hören, wie ihr das anstellen würdet so ein Bild auf einer HTML-Seite zu dynamisieren.

Ich hoffe ihr versteht was ich wissen möchte.

 

[awehring]

Klar geht das im Browser, mit JavaScript. Es ist allerdings Arbeit.

Ich kenne drei Möglichkeiten:
Mit SVG-Grafik: https://jakearchibald.com/2013/animated-line-drawing-svg/
Mit Canvas: Eine kleine Canvas-Einführung
Mit der fabricjs library, auf Basis Canvas: Standalone Controls | Fabric.js Demos

Letzteres bietet sicher die vielseitigsten Möglichkeiten, erfordert aber Einarbeitung in die Library. Schau dir dort einmal die anderen Demos an.

Wenn du dich in SVG einarbeitest, kannst du deine Grafik mit überschaubarem Aufwand dynamisieren. Zeichenelemente ein- und ausblenden ist da relativ einfach.