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:
Folgend sind nun die Websites, welche zur Simulation von SVG-Textanimation sehr hilfreich sind.
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
- Das Stiftwerkzeug bzw. Spline-Drawing auswählen.
- 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.
- Die Option „Füllen“ auf „Keine“.
- 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.
- Mit dem Zeichnen beginnen! – am besten der Buchstaben mittig bleiben.
Infolge von Üben ist das mit Spline Typ 'Catmull-Room' sehr gut, aber evtl. nicht immer. 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.
- 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.
SVG-Editor
- 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. - Der CSS Code von SVG ARTISTA ist im Customizer oder in die
style.csseinzutragen. - 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
- Boxy SVG – Text in Pfad umwandeln
- Pfad von Google Font zu SVG
- Fortgeschritten: Der i-Punkt ist’s
