@@pixxma [So in etwa?](https://codepen.io/gunnarbittersmann/pen/ayEoRQ) Erklärung: Ich habe 3 (fast) identische SVGs als Hintergrundbilder verwendet, Data-URLs, prozentcodiert (die Rohform im Kommentar). Nur zur Verdeutlichung sind sie unterschiedlich gefärbt (`silver`, `red`, `black`); bei dir bekommen sie dieselbe Farbe. Damit die Rechnung einfacher wird, hab ich als Neigungsverhältnis für die Schrift ein ganzzahliges Verhältnis gewählt: ¼. Das ergibt einen Neigungswinkel von arctan ¼ ≈ 14°, der sich in `transform="rotate(-14)"` wiederfindet. Damit genug Luft zwischen den Schriftzügen ist, ist das Seitenverhältnis Höhe : Breite der Textgrafiken nicht ¼, sondern ich habe sie doppelt so hoch gemacht; Seitenverhältnis also ½, was sich in `viewBox="0 0 12 6"` und `background-size: 12em 6em` wiederfindet. Dem Neigungswinkel entsprechend sind die zweite und dritte Textgrafik so gegenüber der ersten verschoben, dass die Texte auf einer Linie stehen: `background-position: 0 0, 8em -2em, 16em -4em` -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@pixxma [So in etwa?](https://codepen.io/gunnarbittersmann/pen/ayEoRQ) Erklärung: Ich habe 3 (fast) identische SVGs als Hintergrundbilder verwendet, Data-URLs, prozentcodiert (die Rohform im Kommentar). Nur zur Verdeutlichung sind sie unterschiedlich gefärbt (silver, red, black); bei dir bekommen sie dieselbe Farbe. Damit die Rechnung einfacher wird, hab ich als Neigungsverhältnis für die Schrift ein ganzzahliges Verhältnis gewählt: ¼. Das ergibt einen Neigungswinkel von arctan ¼ ≈ 14°, der sich in `transform="rotate(-14)"` wiederfindet. Damit genug Luft zwischen den Schriftzügen ist, ist das Seitenverhältnis Höhe : Breite der Textgrafiken nicht ¼, sondern ich habe sie doppelt so hoch gemacht; Seitenverhältnis also ½, was sich in `viewBox="0 0 12 6"` und `background-size: 12em 6em` wiederfindet. Dem Neigungswinkel entsprechend sind die zweite und dritte Textgrafik so gegenüber der ersten verschoben, dass die Texte auf einer Linie stehen: `background-position: 0 0, 8em -2em, 16em -4em` -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@pixxma [So in etwa?](https://codepen.io/gunnarbittersmann/pen/ayEoRQ) Erklärung: Ich habe 3 (fast) identische SVGs als Hintergrundbilder verwendet, Data-URLs, prozentcodiert (die Rohform im Kommentar). Nur zur Verdeutlichung sind sie unterschiedlich gefärbt (silver, gray, black); bei dir bekommen sie dieselbe Farbe. Damit die Rechnung einfacher wird, hab ich als Neigungsverhältnis für die Schrift ein ganzzahliges Verhältnis gewählt: ¼. Das ergibt einen Neigungswinkel von arctan ¼ ≈ 14°, der sich in `transform="rotate(-14)"` wiederfindet. Damit genug Luft zwischen den Schriftzügen ist, ist das Seitenverhältnis Höhe : Breite der Textgrafiken nicht ¼, sondern ich habe sie doppelt so hoch gemacht; Seitenverhältnis also ½, was sich in `viewBox="0 0 12 6"` und `background-size: 12em 6em` wiederfindet. Dem Neigungswinkel entsprechend sind die zweite und dritte Textgrafik so gegenüber der ersten verschoben, dass die Texte auf einer Linie stehen: `background-position: 0 0, 8em -2em, 16em -4em` -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)