Matthias Scharwies: SVG: Text schraffieren?

Servus!

Ich räum grad meine Festplatte auf und habe dieses Beispiel gefunden.

Habt ihr eine Idee, wie man sowas mit CSS / SVG, SVG-Filter herstellten könnte? Einfach nur ein <pattern> aus schmalen Streifen wirkt wsl. nicht so gemalt. Ich wäre für Umsetzungsvorschläge dankbar.

… Herzliche Grüße

Matthias Scharwies

--
Ήταν διασκεδαστικό όσο κράτησε.
Χρύσιππος ὁ Σολεύς, 220 π.Χ.
  1. Hej Matthias,

    Habt ihr eine Idee, wie man sowas mit CSS / SVG, SVG-Filter herstellten könnte?

    Du kannst mal bei Codepen o.ä. suchen, ob du da etwas ähnliches, abwandelbares findest, musst aber damit rechnen, dass du da einen Nachmittag stöberst und nichts (für dieses Problem) findest.

    Und ein Font in der Art ginge auch? - dann könntest du Suchmaschinen auch damit füttern...

    Marc (marctrix)

    --
    Ceterum censeo Google esse delendam
  2. Hej Matthias,

    weil du es mit Font getaggt hast, habe ich mal nach Fonts gesucht. Ich weiß, es ist nicht dasselbe, aber wenn du mehr Zeit investierst (ich habe das in fünf M,inuten gefunden), gibt es vielleicht doch etwas, was dir gefällt.

    Auf die schnelle bin ich auf tusj gestoßen. Gesucht hatte ich bei Duckduckgo nach Artwork Font…

    Marc (marctrix)

    --
    Ceterum censeo Google esse delendam
    1. Servus!

      Hej Matthias,

      weil du es mit Font getaggt hast, habe ich mal nach Fonts gesucht. Ich weiß, es ist nicht dasselbe, aber wenn du mehr Zeit investierst (ich habe das in fünf M,inuten gefunden), gibt es vielleicht doch etwas, was dir gefällt.

      Auf die schnelle bin ich auf tusj gestoßen. Gesucht hatte ich bei Duckduckgo nach Artwork Font…

      Vielen Dank, dass Du Dir die Mühe gemacht hast. Wie gesagt, ich hatte den Screenshot seit ewigen Zeiten auf der Platte.

      Ich bin mir noch nicht genau im klaren drüber, was ich damit mache. Das hat mir aber schon mal geholfen!

      Herzliche Grüße

      Matthias Scharwies

      --
      Ήταν διασκεδαστικό όσο κράτησε.
      Χρύσιππος ὁ Σολεύς, 220 π.Χ.
    2. Hallo Marc, @Matthias Scharwies

      Auf die schnelle bin ich auf tusj gestoßen.

      Die Lizenzbedingungen macht es quasi unmöglich, die Font einzusetzen[1].
      Wieder ein Beispiel dafür, dass Leute ihre eigenen Lizenzbestimmungen erfinden, die gut gemeint sind, aber letztlich unpraktikabel sind.

      Gruß
      Julius


      1. „you are not allowed to use this font in any kind of work that may offend people based on their race, ethnic background or sexual orientation“ trifft im engeren Sinne in irgendeinem Punkt potenziell auf jedes Projekt zu oder man hat die Verhinderung dessen nicht unter Kontrolle, ergo ist die Font nicht benutzbar. ↩︎

  3. Hi,

    Habt ihr eine Idee,

    Evtl. die Buchstaben als Pfade, mit border, und die Schraffur als Hintergrundbild.

    cu,
    Andreas a/k/a MudGuard

    1. Servus!

      Hi,

      Habt ihr eine Idee,

      Evtl. die Buchstaben als Pfade, mit border, und die Schraffur als Hintergrundbild.

      Danke, auch ne gute Idee! Oder nur das Weiße als Hintergrundbild kombiniert mit einer Füllung und Randlinie in der Textfarbe - muss ich mal rumprobieren.

      Die SVG-Muster-Generatoren bieten nur gleichmäßige Muster 😟

      Herzliche Grüße

      Matthias Scharwies

      --
      Ήταν διασκεδαστικό όσο κράτησε.
      Χρύσιππος ὁ Σολεύς, 220 π.Χ.
  4. Hallo Matthias,

    das erinnert mich daran, dass ich vor einiger Zeit mal versucht habe, einen möglichst echt aussehenden Textmaker-Effekt zu realisieren. Und ich habe es nicht zufriedenstellend hingekriegt.

    • Der mit einem Textmarker gezogene Streifen hat am Rand oft ausgefranste, unregelmäßige Kanten
    • Die Deckkraft variiert scheinbar chaotisch
    • Auch die Farbsättigung ist nicht konstant
    • Unter Umständen ändert sich sogar der Farbton der markierten Schrift

    Das sind alles Aspekte, die man irgendwie algorithmisch berücksichtigen kann - aber nicht so chaotisch und doch einigermaßen sauber, dass es realistisch aussieht.

    Live long and pros healthy,
     Martin

    --
    Home is where my beer is.
    1. Hallo zusammen,

      • Der mit einem Textmarker gezogene Streifen hat am Rand oft ausgefranste, unregelmäßige Kanten
      • Die Deckkraft variiert scheinbar chaotisch
      • Auch die Farbsättigung ist nicht konstant
      • Unter Umständen ändert sich sogar der Farbton der markierten Schrift

      das riecht nach multiplen Einsatz von Math.random(), und viel Geduld beim Probieren.

      Gruß
      Jürgen

  5. Servus!

    Ich räum grad meine Festplatte auf und habe dieses Beispiel gefunden.

    Habt ihr eine Idee, wie man sowas mit CSS / SVG, SVG-Filter herstellten könnte?

    Leider nicht. Aber mit Javascript gibt es da was

    --
    Stur lächeln und winken, Männer!
    1. Servus!

      Habt ihr eine Idee, wie man sowas mit CSS / SVG, SVG-Filter herstellten könnte?

      Leider nicht. Aber mit Javascript gibt es da was

      Hallo Kai, vielen Dank! Das sieht genauso aus, wie ich mir das vorgestelt habe! Das muss ich mal ausprobieren.

      Herzliche Grüße

      Matthias Scharwies

      --
      Ήταν διασκεδαστικό όσο κράτησε.
      Χρύσιππος ὁ Σολεύς, 220 π.Χ.
  6. Hallo Matthias

    Habt ihr eine Idee, wie man sowas mit CSS / SVG, SVG-Filter herstellten könnte? Einfach nur ein <pattern> aus schmalen Streifen wirkt wsl. nicht so gemalt. Ich wäre für Umsetzungsvorschläge dankbar.

    Mir ist nicht klar, wo du hier das Problem siehst. Wenn du die Pfade in SVG erzeugst, sieht es nicht gemalt aus und wenn du eine gemalte Vorlage in SVG konvertierst, erzeugst du sehr viele Pfade und damit eine umfangreiche SVG-Datei.

    Ich male/zeichne in Illustrator oder bearbeite eine gemalte Vorlage zu Pfaden und exportiere als SVG mit gewünschter Qualität. Die Frage ist allerdings, ob SVG dafür wirklich das geeignete Format ist.

    Mit freundlichen Grüssen

    Richard

    1. Ich denke auch, es wäre einfacher sich so einen Font schnell selbst zuerstellen, dass lange eine SVG-Programmierung zu versuchen.

      Mit Adobe Illustrator und Fontself kann man schnell und einfach schwarze und bunte eigene Fonts erstellen.

      siehe https://www.fontself.com

    2. Hallo Richard,

      Habt ihr eine Idee, wie man sowas mit CSS / SVG, SVG-Filter herstellten könnte? Einfach nur ein <pattern> aus schmalen Streifen wirkt wsl. nicht so gemalt.

      Mir ist nicht klar, wo du hier das Problem siehst.

      Ich hatte kurz überlegt, ob man regelmäßige Streifen mit einem Filter wie feTurbulence so verfremdet, dass es unregelmäßig aussieht.

      Wenn du die Pfade in SVG erzeugst, sieht es nicht gemalt aus und wenn du eine gemalte Vorlage in SVG konvertierst, erzeugst du sehr viele Pfade und damit eine umfangreiche SVG-Datei.

      Ich male/zeichne in Illustrator oder bearbeite eine gemalte Vorlage zu Pfaden und exportiere als SVG mit gewünschter Qualität.

      Ja, so ein SVG manuell anlegen, schauen, dass die Seiten jeweils aneinanderpassen und es dann als pattern verwenden.

      Die Frage ist allerdings, ob SVG dafür wirklich das geeignete Format ist.

      Ich muss mal schauen, wie groß so ein SVG-Fragment wäre. Das könnte man dann mit CSS,bzw custom properties entsprechend einfärben.

      Das von @kai345 vorgeschlagene rough.js ist so vielseitig, weil man es auch zu Datenvisualisierung verwenden kann. Das musss ich mal ausprobieren.

      Powerpoints sehen ja alle gleich aus!

      Herzliche Grüße

      Matthias Scharwies

      --
      Ήταν διασκεδαστικό όσο κράτησε.
      Χρύσιππος ὁ Σολεύς, 220 π.Χ.
      1. Hallo Matthias,

        rough.js ... das muss ich mal ausprobieren

        Würde ich auch gern. Aber wieso gibt's das nur über diese Plattenvollmüllmaschine npm? Das ist ein .js File (nagut, 4, er hat 3 abhängige, eigene .js dabei) - wieso bietet man das nicht per Download an.

        Danke, aber nein danke.

        Rolf

        --
        sumpsi - posui - obstruxi