rock your blog
Dieses Webmuster habe ich mit Affinity Designer erstellt und als SVG exportiert. In der SVG-Datei habe ich Zeichnung als Muster (Pattern) definiert. Mittels der Slider kannst du das Muster rotieren, sklalieren und die Linien (strokes) ein- bzw. ausblenden. Die Verbindung zwischen den Reglern und der Grafik ist mit JavaScript realisiert.
See the Pen SVG seamless rounded weawing pattern by Norbert Mesch (@itsnorbat) on CodePen.
Sonntagabend und wieder ein neues SVG-Pattern. Die Konstruktion ist recht einfach. Auf einem 150 x 150 Pixel großen Pattern wird ein Quadrat von 150 x 150 Pixeln angelegt. Dieses Quadrat bildet den Vordergrund. Auf dem Quadrat werden vier weitere Quadrate von 25 x 25 Pixeln angelegt. Diese vier Quadrate bilden den Hintergrund. Die darüber gezeichneten Linienelemente (Breite: 2px) deuten die Kreuzungen des Musters an. Die Linien, die auf auf dem Rand des Musters liegen sind in doppelter Strichstärke (4px) angelegt. Die Dreiecke mit der gleichen Farbe der Linien und einer Deckung von 30% (opacity=“0.3″) verstärken den dreidimensionalen Effekt des Musters.
In meinem heutigen Beispiel zeige ich dir ein Muster das aus einem Sechseck (Hexagon) konstruiert wurde. In meinem Beispiel vom 14. Juni Pattern in SVG habe ich bei den Würfeln bereits bei der Konstruktion mit einem Hexagon gearbeitet. Zum besseren Verständnis habe ich den Hintergrund des befüllten Rechteckes mit Hilfe des opacity-Attributes animiert.
In diesem Beitrag siehst du ein typisches Wabenflechtmuster eines Stuhls. Ich habe mir das Muster angesehen und danach ein Pattern in SVG konstruiert. Das dargestellte Muster habe ich in der linken Abbildung auf 50% verkleinert und damit das Quadrat gefüllt. Im rechten Quadrat habe ich die Transparenz auf 50% reduziert und das originale Pattern im Quadrat platziert.
Wenn du dir das Muster ansehen möchtest, kannst du dir Abbildung mit rechten Maustaste in einem neuen Tab oder Fenster ansehen und dort in den Quelltext schauen.
See the Pen Comb seamless repeating pattern by Norbert Mesch (@itsnorbat) on CodePen.
In diesem Beispiel siehst du Muster aus Viertelkreisen. Die dargestellten Kreise sind mit den Mustern gefüllt und animiert. Mit der Animation möchte ich die zeigen, wie die Muster rotiert aussehen würden. In diesem Beispiel war es aber einfacher die Kreise zu rotieren zu lassen, weil sich das Attribut transformPattern nicht animieren lässt. Am Effekt ändert sich dadurch aber nichts.
Die verschiedenen Drehrichtungen werden einfach dadurch erzeugt, dass im linken Kreis die Animation von 0° bis 360° läuft und im rechten Kreis von 360° bis 0°. Mit dem Attribut repeatCount=“indefinite“ rotieren die Kreise ununterbrochen.
Animierte Kreise mit Füllmuster aus drei Viertelkreisen
Im folgenden Beispiel habe ich das obige Muster um weitere Vollkreise über die Ecken des Musters erweitert. Der gefüllte Punkt ist ein Kreis ohne Kontur mit eine Radius r=4. Der innere Vollkreis hat seinen Ursprung ebenfalls in den vier Ecken des Musters, ohne Füllung aber wieder mit einer orange gefärbten Kontur (Stroke) von 3px Stärke. Die SVG-Quellen kannst du dir über die Funktion Entwicklermodus deines Browsers ansehen oder indem du die Grafik einfach in einem neuen Tab anzeigen lässt und dann auf Seitenquelltext anzeigen gehst. Über das Attribut transfromPattern und die Funktion rotate(-45) habe ich das Muster um 45° gegen den Uhrzeigersinn gedreht.
<pattern id="C3TLBLBR" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)"> ... </pattern>
Im folgenden Beispiel habe ich das zuvor quadratische Muster durch ein doppelt so breites, rechteckiges Muster ersetzt und zwei Halbkreise mit ihrem Zentrum in der Mitte am oberen und unteren Rand des Rechtecks platziert. Das Muster siehst du in der linken Abbildung.
See the Pen Seamless SVG pattern by Norbert Mesch (@itsnorbat) on CodePen.
Die folgenden Muster (Pattern) wurden als SVG-Dateien angelegt und bestehen aus Kreisen, die sich überlappen. Um Muster zu transformieren kannst du das Attribut patternTransform im Pattern-Element verwenden. Du findest Beispiele dazu in meinem letzten Artikel (SVG Pattern – Bauernkaro).
See the Pen Animated SVG owl by Norbert Mesch (@itsnorbat) on CodePen.
In meinem letzten Beitrag habe ich dir gezeigt, wie du wiederkehrende Muster (Pattern) mit SVG erstellen kannst. Hier siehst du verschiedene Baunernkaros die sich mit Hilfe zweier, übereinander gelegter Rechtecke erstellen lassen. Das Bauernkaro ist im englischsprachigen Raum auch unter dem Begriff Gingham-Muster oder Vichy-Muster bekannt.
Die Rechtecke werden mit einer Füllfarbe ohne Rand gefüllt und mit einer Transparenz (Opacity) von 50% (0.5) versehen. Im Bereich der Überlappung entsteht durch die Transparenz das dunkle Quadrat (siehe linke Abbildung). Das einzelne Pattern findest du in der rechten Abbildung wieder.
Das obige Muster habe ich in einem <defs>-Element von 40 x 40 px angelegt und damit im folgenden Beispiel die Kreise mit Konturen in verschiedenen Farbvarianten gefüllt.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="340" height="340">
<title>Bauernkaro blau</title>
<desc>Vichy-Muster, gingham</desc>
<defs>
<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="40" stroke="none" fill="#2980b9" opacity="0.5"/>
<rect x="0" y="0" width="40" height="20" stroke="none" fill="#2980b9" opacity="0.5"/>
</pattern>
</defs>
<circle cx="170" cy="170" r="168" fill="url(#vichy)" stroke="#2980b9" stroke-width="4px"/>
</svg>
In den folgenden Beispielen habe ich den obigen Mustern einfach weitere Fäden, farbige Linien bzw. Rechtecke mit einem Abstand vom oberen und linken Rand des Musters hinzugefügt. Die Linien sind mit einer Transparenz von 30% (0.3) versehen.
Es lassen sich aber auch andere Hintergründe wählen auf denen dann z.B. weiße oder andersfarbige Rechtecke oder Linien mit Transparenzen platzieren lassen.
Mit dem zusätzlichen Attribut patternTransform lässt sich das gesamte Muster transformieren. Im Beispiel SVG Bauernkaro Rot/Blau rotiert 45° ist das Muster aus dem vorherigen Beispiel um 45° mit rotate(45) gedreht .
<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> ... </pattern>
oder skewX(20) | skewY(20)
<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="skewX(20)"> ... </pattern>
mit der Funktion scale() im patternTransform-Attribut lässt sich das Muster auch skalieren.
<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="scale(3)"> ... </pattern>