Offener Kreis mit CSS

[Coulyo]

Hi,

ich möchte für ein Projekt ein Logo mit CSS nachbauen, dass dem klassischen ON/OFF-Symbol

Bitte kostenlos registrieren, damit du die Links siehst.

stark ähnelt. Hauptgrund, warum ich kein Bild verwenden will ist, dass ich das Logo gerne animieren würde, um es als Ladesymbol zu verwenden.
Das Problem ist, dass ich nicht rausfinde, wie ich einen oben offenen Kreis mit CSS hinbekomme. Wichtig sind dabei auch die abgerundeten Ende des Kreisbogens, wie im Beispielbild zu sehen.

Kann mich jemand in die richtige Richtung schubsen?

 

[liselotte]

SVG Grafik kommt nicht in Frage?

 

[Coulyo]

SVG Grafik kommt nicht in Frage?

Ich habe bisher noch nicht mit svg gearbeitet. Werde es mir mal anschauen. Danke!