SVG Marschierenden Ameisen

0
24

Maxim Leyzerovich erstellt, die marschierenden Ameisen Effekt mit einigen köstlich einfache SVG.

Finden Sie den Stift SVG Marschierenden Ameisen von Maxim Leyzerovich (@Runde) auf CodePen.

Lassen Sie uns brechen Sie auseinander, Stück für Stück und sehen, all die kleinen Teile zusammen kommen.

Schritt 1: Zeichnen Sie ein Rechteck dang

Wir können unsere SVG wie ein Quadrat, aber haben das Seitenverhältnis ignoriert und haben es flex in Rechteck, was wir möchten.

<svg viewbox=’0 0 40 40′ preserveAspectRatio= “none”>
<rect width=’40’ height=’40’ />
</svg>

Sofort, wir werden daran erinnert, dass das Koordinatensystem, innerhalb einer SVG-Einheit-weniger. Hier sagen wir, “Dieser SVG ist ein 40×40-Gitter. Zeichnen Sie nun ein Rechteck über die gesamte grid.” Wir können noch die Größe der gesamten SVG in CSS aber. Lassen Sie erzwingen, dass es genau die Hälfte der viewport:

svg {
position: absolute;
Breite: 50vw;
Höhe: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

Schritt 2: Kampf der squish

Da wir die box und das Netz so flexibel, wir besorgen uns etwas Anquetschen, dass wir wohl Vorhersagen können. Sagen wir, wir haben einen Strich in 2 breiten in unser Koordinatensystem. Wenn die SVG ist schmal, es muss noch gespalten, schmalen Raum in 40 Einheiten. Das bedeutet, dass der Hub Recht eng werden.

Wir können das beenden, indem er dem Schlaganfall zu werden, non-scaling.

rect {
fill: none;
stroke: #000;
stroke-width: 10px;
Vektor-Effekt: non-scaling-stroke;
}

Nun werden die Linien Verhalten sich eher wie eine Grenze, die auf ein HTML-element.

Schritt 3: Zeichnen Sie das Kreuz Linien

In Maxim ‘ s demo, zieht er die Linien in der Mitte mit vier Pfad-Elemente. Denken Sie daran, wir haben ein 40×40 Koordinatensystem, so dass die Mathematik ist groß:

<path d= “M 20,20 L 40,40′ />
<path d= ” M 20,20 L 00,40 ‘/>
<path d= “M 20,20 L 40,0′ />
<path d= “M 20,20 L 0,0’ />

Dies sind die vier Zeilen, die beginnen genau in der Mitte (20,20) und gehen an jeder Ecke. Warum vier Leitungen statt zwei, go-Ecke, an der Ecke? Ich vermute, es ist, weil die marschierenden Ameisen, die animation später sieht irgendwie cooler, wenn alle Ameisen, die aus der Mitte, anstatt Kreuz und quer.

Ich Liebe die schöne syntax Weg, aber lassen Sie uns nur zwei Linien verwenden, anders zu sein:

<line x1=”0″ y1=”0″ x2=”40″ y2=”40″></Linie>
<line x1=”0″ y1=”40″ x2=”40″ y2=”0″></Linie>

Wenn wir unsere Schlaganfall-sowohl für unser Rechteck und Linie, es funktioniert! Aber wir sehen eine etwas seltsame Frage:

rect, line {
fill: none;
stroke: #000;
stroke-width: 1px;
Vektor-Effekt: non-scaling-stroke;
}

Die äußere Linie erscheint dünner als die inneren Linien, und der Grund dafür ist, dass das äußere Rechteck ist umarmt die genaue außerhalb des SVG. Als ein Ergebnis, alles außerhalb ist es abgeschnitten. Es ist ziemlich frustrierend, aber Striche in SVG immer überspannen die Wege, auf dem Sie sitzen, also genau die Hälfte der äußeren Kontur (0,5 Pixel) versteckt ist. Wir können die Doppel-Rechteck-allein es zu “reparieren”:

rect, line {
fill: none;
stroke: #000;
stroke-width: 1px;
Vektor-Effekt: non-scaling-stroke;
}

rect {
stroke-width: 2px;
}

Maxim wirft auch ein shape-rendering: geometricPrecision; dort, da, anscheinend, es reinigt die Dinge ein wenig auf nicht-retina-displays.

Schritt 3: die Ameisen sind Bindestriche

Andere als die seltsame Spagat zwischen-den-Zeile Sache, SVG-Schläge bieten so mehr Kontrolle als CSS-Grenzen. Zum Beispiel, CSS gestrichelte und gepunktete Linie Stile, bietet aber keine Kontrolle über Sie. In SVG, wir haben die Kontrolle über die Länge der Striche und der Abstand zwischen Ihnen, Dank der stroke-dasharray:

rect, line {

/* 8px Striche mit 2px Leerzeichen */
stroke-dasharray: 8px 2px;
}

Wir können sogar echt seltsam mit ihm:

Aber die Ameisen gut Aussehen mit 4px Striche und 4px Leerzeichen zwischen, so dass wir verwenden können, eine Kurzform von stroke-dasharray: 4px;.

5. Schritt: Animieren Sie die Ameisen!

Die “marschierenden” Teil der “marschierenden Ameisen” kommt von der animation. SVG-Striche haben auch die Fähigkeit zu verrechnen, die von einem bestimmten Abstand. Wenn wir wählen eine Strecke, die genauso lang sind wie der Strich und die Lücke zusammen, dann animieren Sie die offset-der Abstand, können wir eine reibungslose Bewegung der Kontur-design. Wir haben auch damit abgedeckt, bevor Sie einen Effekt zu erstellen einer SVG-das zieht sich.

rect, line {

stroke-dasharray: 4px;
stroke-dashoffset: 8px;
animation: Schlaganfall 0.2 s linear infinite;
}

@keyframes Schlag {
{
stroke-dashoffset: 0;
}
}

Hier ist unsere Replik und dem original:

Finden Sie den Stift SVG Marschierenden Ameisen von Maxim Leyzerovich (@Runde) auf CodePen.

Vielleicht wieder mein Lieblings-Teil ist hier die scharfe 1px-Linien, die nicht begrenzt durch Größe oder das Seitenverhältnis überhaupt und wie wenig code es braucht, um es alle zusammen.

SHARE
Previous articleSVG Marching Ants
Next articleSVG Marcherende Mieren