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
      2. Hej Matthias,

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

        Nein, nicht so. Nimm mehrere Hintergründe (drei bis fünf), die Striche machst du halbtransparent, so dass es aussieht, wenn sich zwei Striche (teilweise) überlagern, als wären beide einzeln gezogen. Die Striche zeichnest du am besten von der Hand und achtest dabei darauf, dass die Striche auf einer Fläche verteilt sind, die du in gleich große Bereiche aufteilst. Die Teile sollten Primzahlen entsprechen (1/3, 1/5, 1/7 usw) - da Primzahlen (insbesondere mehrere, also 3-5 davon) sehr große kleinste gemeinsame Vielfache haben, erhältst du so viele Möglichkeiten, der Kombination von nebeneinanderliegenden Strichen mit unterschiedlichem starkem Druck, hin und wieder übereinanderliegend, dass du keine wiedererkennbaren Patterns erhältst. Die Technik ist ziemlich alt. Ich habe sie vor Jahren mal ins deutsche übersetzt. Hier die komplette Anleitung, wie man das Zikaden-Prinzip im Webdesign einsetzt.

        Marc (marctrix)

        --
        Ceterum censeo Google esse delendam
        1. Hej Marc,

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

          Hier die komplette Anleitung, wie man das Zikaden-Prinzip im Webdesign einsetzt.

          Gibt jetzt ein Update von der großartigen Lea Verou: the cicada principle revisited with css variables (diesmal hatte ich die Idee schon vor Vera - war schon am überlegen, ob ich was dazu schreiben soll - zu spät... :-D )

          Marc (marctrix)

          --
          Ceterum censeo Google esse delendam
          1. Servus!

            Hier die komplette Anleitung, wie man das Zikaden-Prinzip im Webdesign einsetzt.

            Gibt jetzt ein Update von der großartigen Lea Verou: the cicada principle revisited with css variables (diesmal hatte ich die Idee schon vor Vera - war schon am überlegen, ob ich was dazu schreiben soll - zu spät... :-D )

            Danke für den Tipp!

            PS: Du hast ja bestimmt einen anderen Blog-Artikel in Arbeit, oder?

            Herzliche Grüße

            Matthias Scharwies

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

              ist dir eigentlich aufgefallen, das der Marc wieder Marc heißt? 😀

              Bis demnächst
              Matthias

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              1. Servus!

                Hallo Matthias Scharwies,

                ist dir eigentlich aufgefallen, das der Marc wieder Marc heißt? 😀

                Neeeeeiiiin! - Ich brauch mal ne Pause!

                Herzliche Grüße

                Matthias Scharwies

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

                ist dir eigentlich aufgefallen, das der Marc wieder Marc heißt? 😀

                nein, erst jetzt, da du uns mit der Nase drauf stößt!

                Live long and pros healthy,
                 Martin

                --
                Home is where my beer is.
              3. Hallo Matthias,

                ist dir eigentlich aufgefallen, das der Marc wieder Marc heißt? 😀

                Ich frage mal als – vermutlich – an der Sache Unbeteiligter: Was ist überhaupt passiert?

                Gruß
                Julius

                1. Servus!

                  Hallo Matthias,

                  ist dir eigentlich aufgefallen, das der Marc wieder Marc heißt? 😀

                  Ich frage mal als – vermutlich – an der Sache Unbeteiligter: Was ist überhaupt passiert?

                  Marc Haunschild war mal als "Marc" im Forum bekannt, bis ihm - wie weiß ich nicht - irgendjemand den Nick weggeschnappt hatte. Dann musste er mit - dem auch ganz guten - "marctrix" vorliebnehmen.

                  Er war in der internen Diskussion für die Löschung der Altfälle, um irgendwann seinen richtigen Namen wieder benutzen zu dürfen. Anscheinend war's jetzt soweit.

                  Herzliche Grüße

                  Matthias Scharwies

                  PS: eigentlich dachte ich ja, dass er ab 2001 nicht mehr Marc sondern "Euro" heißen müsste.

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

                    PS: eigentlich dachte ich ja, dass er ab 2001 nicht mehr Marc sondern "Euro" heißen müsste.

                    Eher Eyro.

                    Bis demnächst
                    Matthias

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                    1. Hallo Matthias,

                      PS: eigentlich dachte ich ja, dass er ab 2001 nicht mehr Marc sondern "Euro" heißen müsste.

                      Eher Eyro.

                      wieso das? Soweit ich weiß, ist Marc doch kein Grieche. Oder doch ...?
                      Und selbst wenn: Dann hieße er ΕΥΡΟ oder Ευρο.

                      Live long and pros healthy,
                       Martin

                      --
                      Home is where my beer is.
                      1. Hallo Der Martin,

                        PS: eigentlich dachte ich ja, dass er ab 2001 nicht mehr Marc sondern "Euro" heißen müsste.

                        Eher Eyro.

                        wieso das? Soweit ich weiß, ist Marc doch kein Grieche.

                        Aber auch kein Mark.

                        Bis demnächst
                        Matthias

                        --
                        Du kannst das Projekt SELFHTML unterstützen,
                        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                  2. Hallo Matthias,

                    ist dir eigentlich aufgefallen, das der Marc wieder Marc heißt? 😀

                    Ich frage mal als – vermutlich – an der Sache Unbeteiligter: Was ist überhaupt passiert?

                    Marc Haunschild war mal als "Marc" im Forum bekannt, bis ihm - wie weiß ich nicht - irgendjemand den Nick weggeschnappt hatte. Dann musste er mit - dem auch ganz guten - "marctrix" vorliebnehmen.

                    Ah. Der Wechsel war aber schon vor fast einem halben Jahr (hatte es daher schon ad acta gelegt), sodass ich den aktuellen Zusammenhang nicht herstellen konnte.

                    Er war in der internen Diskussion für die Löschung der Altfälle, um irgendwann seinen richtigen Namen wieder benutzen zu dürfen. Anscheinend war's jetzt soweit.

                    Schlüssig und nachvollziehbar.

                    Gruß
                    Julius

                  3. Hallo,

                    PS: eigentlich dachte ich ja, dass er ab 2001 nicht mehr Marc sondern "Euro" heißen müsste.

                    ja, aber dann nur noch ungefähr halb so viel. 🤓

                    Live long and pros healthy,
                     Martin

                    --
                    Home is where my beer is.
            2. Hej Matthias,

              PS: Du hast ja bestimmt einen anderen Blog-Artikel in Arbeit, oder?

              Nein, ist nämlich schon Lange fertig 😉

              Ich warte allerdings noch auf das ok von dem Herrn, dessen Seite ich als Beispiel verwendet habe.

              Leider stocken in der Urlaubszeit auch die Arbeiten, so dass ich darauf noch gar nicht verlinken kann…

              Sorry, ist nicht in meiner Macht aktuell.

              Marc (marctrix)

              --
              Ceterum censeo Google esse delendam
              1. Servus!

                Hej Matthias,

                PS: Du hast ja bestimmt einen anderen Blog-Artikel in Arbeit, oder?

                Nein, ist nämlich schon Lange fertig 😉

                Ich warte allerdings noch auf das ok von dem Herrn, dessen Seite ich als Beispiel verwendet habe.

                Kein Problem!

                Leider stocken in der Urlaubszeit auch die Arbeiten, so dass ich darauf noch gar nicht verlinken kann…

                Ich habe die Steuer fertig, räume grad meinen Schreibtisch auf und morgen geht's in die Wildnis, wo's kein Corona gibt!

                Herzliche Grüße

                Matthias Scharwies

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