SVG-Text

SVG-Text von Zauberhand! – Animation mit Strichen

ABC / Lernen, var. Illustration von geralt
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Classic und TinyMCE – und tut sehr gut!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Classic und TinyMCE – ist so fein!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Der SVG-Text so animiert, dass es wie von Hand geschrieben wirkt. Eigentlich ist das ein Simulieren von 'Text'. Darum ist das im Beginne sehr anspruchsvoll. An sich ist das für kürzere Animationen geeignet wie einer SVG-Signatur.  Also hier ist das im Beschrieb, um diesen Effekt in mehr von Minuten zu erzielen. Es ist in diesem Beitrag nur gezeigt, welche von Websites hier sehr geholfen haben. – follow me, so für n' Anfang.

Zum Thema SVG-Text animieren

Das Thema entstand im Anschluss des Artikels SVG-Animation in WordPress. – so funktioniert’s. Dies hier mit der Text-Animation bzw. Simulation ist die Fortsetzung des Artikels. Also sehr von Vorteil bzw. das Muss folgendem:

SVG-Animation in WordPress. – so funktioniert’s

Folgend sind nun die Websites, welche zur Simulation von SVG-Textanimation sehr hilfreich sind.

Der Tippen-Effekt, wie das!

Erste, Schrift wie von Zauberhand

Sehr lehrreich zum elementaren.

SVG-Maskierung, Schichten herstellen

Folgend … das ist für das Allgemeinverständnis sehr gut! Denn so mehr von Arbeitsvorgängen ist folgend unter Vierte, SVG-Code samt CSS für die Animation automatisch.

Zweite, Schrift-Generator

Das kann sehr von Nutzen sein, denn der Machart ist dann eher auf einfache Handschrift zu achten als eine geschwungene. So für’n Anfang.

Dort ist eine Schablone zu downloaden und im SVG-Programm nachzuzeichnen.

Die Vorlage so am besten der Größe Maximum herunterladen, z.B.:

Oder so ganz die eigene Handschrift auf ein Blatt Papier dann fotografieren. Das Bild im SVG-Editor öffnen, ausschneiden und nachzeichnen.

Dritte, SVG-Editor

  1. Das Stiftwerkzeug bzw. Spline-Drawing auswählen.
  2. Die Spline-Drawings: Linie, Quad Bèzier, Cubic Bèzier,  'Catmull-Rom'. Hier die Animationen am besten gelungen, mit Linie. Den Kurven besser ein Punkt zu viel als zu wenig. Von wegen Dateigröße ist dann gescheiter sowas: SVGOMG. Infolge von Üben ist das mit Spline Typ 'Catmull-Room' auch von gut, aber nicht immer.
  3. Die Option „Füllen“ auf „Keine“.
  4. Die Strichbreite hängt von der verwendeten Schriftart ab. Evtl. erst mal die Strichbreite so auf 5 Pixel und die Farbe wies gefällt. Beides ist ja im Nachhinein anzupassen.
  5. Mit dem Zeichnen beginnen! – am besten der Buchstaben mittig bleiben.

    Das mit dem Nachzeichnen ist folgenden Video von CSS-TRICKS gezeigt. Ich darf das von CSS-TRICKS wiederholen:

    Das im Video ist mit Spline-Drawing von Typ 'Catmull-Rom'. – ein geübter Zeichner tut sich leichter.

  6. Danach die Striche anpassen. Da wird meist das so bei Line (Linie) / Cap (Deckel) mit Round (Rund) und bei Join (Verbinden) auch das mit Round evtl. mal Bevel (Fase / Abschrägung). Probieren.

    Das mit dem 'Cap' so oder so und das mit 'Join' kann Buchstabens auch individuell von Vorteil sein.

Ist man mit dem Ergebnis zufrieden, ist das abzuspeichern. – nicht zu vergessen, spätestens da ist vor dem Speichern die Schablone zu entfernen. So folgt der nächste Schritt.

Vierte, SVG-Code samt CSS für die Animation

Hier ist dann zur Sache der Animation.

Das Folgende im Zusammenspiel mit dem Beitrag SVG-Animation in WordPress. – so funktioniert’s

Sequential Animation

Das von envato-tuts+ dort im Titel 7. Sequential Animation ist sehr ansprechend zum Verständnis der Sequenzen.

Bild von 'envato' zur Sequential Animation

SVG-Editor

  1. Der SVG Code ist in Copy-and-paste bspw im Boxy SVG oder entsprechenden Programm einzutragen. Danach das SVG nochmals abspeichern und in das WP-Backend hochladen.

    Hier ist des SVG zu sehen, welche Class von SVG ARTISTA hizugefügt wurde.
  2. Der CSS Code von SVG ARTISTA ist im Customizer oder in die style.css einzutragen.
  3. Der Shortcode dann im Content oder einem Text-Widget:
    [insert-svg-code file="Eva-wp" class="svg-eva-1 svg-size3 svg-onscroll svg-refresh-trigger"]

Denkbarer Workflow

Was das Programm SVG ARTISTA für uns arbeitet, das geht aus folgenden Artikel im Titel Animieren Sie Ihre eigene SVG-Signatur hervor. Mit dabei ist noch Tipp der Überschrift "4. All the Other SVG Attributes". Da geht es dann, um häufig verwendete Attribute zu entfernen und diese stattdessen im CSS einfügen.

Bitte, wenn’s gefällt, aber von muss-sein ist das nicht! Denn mit von SVG ARTISTA generierten SVG ist diesem Selektor das CSS ansprechbar.

Bspw folgende Attribute style="stroke-width: 10px; stroke: rgb(214, 42, 42);.  Hier dem Beispiel ist das mit dem Selector svg-eva-1  gezeigt.  Der Machart ist dann das !important bedingend.

.svg-eva-1 path {
        stroke-width: 5 !important;
	stroke: rgb(214, 42, 42) !important;
}

Anders für so ohne !important würden dem SVG die Attribute wegzumachen sein und das CSS ist dann Bedingung, bspw:

.svg-eva-1 path, .svg-eva-1 line {
	fill: none;
	stroke: rgb(214, 42, 42);	
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
  • Weiter von Beispiele den Suchmaschinen in Begriffen "dashoffset svg animation" oder "svg handschrift animation", da ist unter Bilder noch mehr zu finden.

Und weil’s nun so lustig ist  🙂

 

So in etwa der Einstellung auf SVG ARTISTA


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert