Servus! Ich hab auch mit canvas angefangen und bin erst später auf SVG umgestiegen. Glaub mir es ist genial. Nutz die Feiertage und lies dich in SVG ein: * zum Orientieren die Blog-Serie: [SVG - ein Format für alle Fälle](https://blog.selfhtml.org/2016/11/23/svg-ein-format-fuer-alle-faelle/) * praktischer Einstieg: [SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen](http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen) Wie Gunnar schon sagt, benötigst Du für die linke Uhr nur 2 Kreise und 2 Text-Elemente: ~~~svg <circle cx="100" rx="100" r="70" /> <circle cx="100" rx="100" r="50" /> <text x="100" y="50" font-size="24">04</text> <text x="100" y="70" font-size="16" >January</text> ~~~ *(Warum hat das Bsp keine Live-Uhr?)* Die Randlinien kannst du mit stroke-dasharray als durchgezogene (Standard) oder gestrichelte Linie festlegen. Das kannst du dann mit CSS-Animation oder JavaScript animieren. hier ein [Beispiel](http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Texteffekte#animinierte_Randlinien) für Text. SVG kann wie HTML ids und Klassen haben, mit denen Du CSS und JS anhängen kannst. Das ist keine große Umstellung. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! Ich hab auch mit canvas angefangen und bin erst später auf SVG umgestiegen. Glaub mir es ist genial. Nutz die Feiertage und lies dich in SVG ein: * zum Orientieren die Blog-Serie: [SVG - ein Format für alle Fälle](https://blog.selfhtml.org/2016/11/23/svg-ein-format-fuer-alle-faelle/) * praktischer Einstieg: [SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen](http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen) Wie Gunnar schon sagt, benötigst Du für die linke Uhr nur 2 Kreise und 2 Text-Elemente: ~~~svg <circle cx="100" rx="100" r="70" /> <circle cx="100" rx="100" r="50" /> <text x="100" y="50" font-size="24">04</text> <text x="100" y="70" font-size="16" >January</text> ~~~ *(Warum hat das Bsp keine Live-Uhr?)* Die Randlinien kannst du mit stroke-dasharray als durchgezogene (Standard) oder gestrichelte Linie festlegen. Das kannst du dann mit Css-Animation oder JavaScript animieren. hier ein [Beispiel](http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Texteffekte#animinierte_Randlinien) für Text. SVG kann wie HTML ids und Klassen haben, mit denen Du CSS und JS anhängen kannst. Das ist keine große Umstellung. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! Ich hab auch mit canvas angefangen und bin erst später auf SVG umgestiegen. Glaub mir es ist genial. Nutz die Feiertage und lies dich in SVG ein: * zum Orientieren die Blog-Serie: [SVG - ein Format für alle Fälle](https://blog.selfhtml.org/2016/11/23/svg-ein-format-fuer-alle-faelle/) * praktischer Einstieg: [SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen](http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen) Wie Gunnar schon sagt, benötigst Du für die linke Uhr nur 2 Kreise und 2 Text-Elemente: ~~~svg <circle cx="100" rx="100" r="70" /> <circle cx="100" rx="100" r="50" /> <text x="100" y="50" font-size="24">04</text> <text x="100" y="70" font-size="16" >04</text> ~~~ Die Randlinien kannst du mit stroke-dasharray als durchgezogene (Standard) oder gestrichelte Linie festlegen. Das kannst du dann mit Css-Animation oder JavaScript animieren. hier ein [Beispiel](http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Texteffekte#animinierte_Randlinien) für Text. SVG kann wie HTML ids und Klassen haben, mit denen Du CSS und JS anhängen kannst. Das ist keine große Umstellung. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! Ich hab auch mit canvas angefangen und bin erst später auf SVG umgestiegen. Glaub mir es ist genial. Nutz die Feiertage und lies dich in SVG ein: * zum Orientieren die Blog-Serie: [SVG - ein Format für alle Fälle](https://blog.selfhtml.org/2016/11/23/svg-ein-format-fuer-alle-faelle/) * praktischer Einstieg: [SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen](http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Flaggen_mit_SVG_zeichnen) Wie Gunnar schon sagt, benötigst Du für die linke Uhr nur 2 Kreise und 2 Text-Elemente: ~~~svg <circle cx="100" rx="100" r="70" /> <circle cx="100" rx="100" r="50" /> <text x="100" y="50" font-size="24">04</text> <text x="100" y="70" font-size="16" >04</text> ~~~ Die Randlinien kannst du mit stroke-dasharray als durchgezogene (Standard) oder gestrichelte Linie festlegen. Das kannst du dann mit Css-Animation oder JavaScript animieren. hier ein [Beispiel](http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Texteffekte#animinierte_Randlinien) für Text. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! Ich hab auch mit canvas angefangen und bin erst spöäter auf SVG umgestiegen. Glaub mir es ist genial. (Mir ist grad irgnedwie das ganze Posting kaputt geagene, ich schreibe gleich ein zweites mit Links und Codebeispielen). Nutz die Feiertage und lies dich in SVG ein: Wie Gunnar schon sagt, benötigst Du für die linke Uhr nur 2 Kreise und 2 Text-Elemente: ~~~svg <circle cx="100" rx="100" r="70" /> <circle cx="100" rx="100" r="50" /> <text x="100" y="50" font-size="24">04</text> <text x="100" y="70" font-size="16" >04</text> ~~~ Die Randlinien kannst du mit stroke-dasharray als durchgezogene (Standard) oder gestrichelte Linie festlegen. hier ein [Beispiel](http://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Texteffekte#animinierte_Randlinien) für Text. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! Ich hab auch mit canvas angefangen und bin erst spöäter auf SVG umgestiegen. Glaub mir es ist genial. (Mir ist grad irgnedwie das ganze Posting kaputt geagene, ich schreibe gleich ein zweites mit Links und Codebeispielen). Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! > Hey, > > > Das ist natürlich völliger Unsinn. Die Ringe sind mit wenigen Zeilen SVG gemacht und mit wenigen Zeilen CSS animiert. > > > > JavaScript und canvas sind hier völlig fehl am Platz. > > Da ist auch kein Javascript involviert. Egal lenken wir das Thema auf die eigentliche für mich wichtige Frage. > > ~~~HTML > <canvas id="particle1_2" width="40" height="510"></canvas> > <script> > var canvas = document.getElementById('particle1_2'); > var context = canvas.getContext('2d'); > > context.beginPath(); > context.lineTo(10, 80); > context.lineTo(0, 65); > context.lineTo(0, 15); > context.lineTo(10, 0); > context.lineTo(10, 80); > > context.closePath(); > context.lineWidth = 1; > context.fillStyle = 'rgba(2,254,255,0.3)'; > context.fill(); > context.strokeStyle = 'transparent'; > context.stroke(); > </script> > ~~~ > > Dies finde ich sehr interessant, vorallem weil ich keine Ahnung habe wie ich .svg's schreibe und mich besser hiermit auskenne. Aber die W3C eben sagt: "This specification is no longer in active maintenance and the HTML Working Group does not intend to maintain it further". > > Gruß > Jo Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}