SVG Marcherende Mieren

0
21

Maxim Leyzerovich gemaakt van de marcherende mieren effect met een aantal delectably eenvoudige SVG.

Zie de Pen SVG Marcherende Mieren door Maxim Leyzerovich (@ronde) op CodePen.

Laten we breken uit elkaar beetje bij beetje en zien alle kleine onderdelen komen samen.

Stap 1: Teken een rechthoek dang

Wij kunnen onze SVG-zoals een plein, maar hebben de aspect ratio genegeerd en hebben het flex in welke rechthoek we zouden willen.

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

Meteen zijn we eraan herinnerd dat het assenstelsel in een SVG-eenheid is-minder. Hier zeggen we: “Dit SVG is een 40×40 raster. Teken nu een rechthoek over het gehele net.” We kunnen nog steeds de grootte van het hele SVG-in CSS al. Laten we dwingen het zijn precies de helft van de viewport:

svg {
position: absolute;
breedte: 50vw;
hoogte: 50vh;
top: 0;
rechts: 0;
bottom: 0;
links: 0;
margin: auto;
}

Stap 2: de Strijd van de squish

Omdat we de box en het raster zo flexibel, krijgen we een aantal squishing dat we waarschijnlijk zou hebben voorspeld. Stel, we hebben een streep van 2 breed in onze assenstelsel. Wanneer de SVG is smal, maar het moet toch op te splitsen die smalle ruimte in 40 eenheden. Dat betekent dat de lijn zal worden vrij smal.

We kunnen stoppen dat door het vertellen van de beroerte worden non-scaling.

rect {
fill: none;
beroerte: #000;
stroke-width: 10px;
vector-effect: non-scaling-stroke;
}

Nu de beroerte zal gedragen zich meer als een grens op een HTML-element.

Stap 3: Teken het kruis lijnen

In Maxim ‘ s demo, hij trekt de lijnen in het midden pad met vier elementen. Vergeet niet, we hebben een 40×40 assenstelsel, dus de wiskunde is groot:

<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’ />

Dit zijn vier regels die beginnen in het exacte middelpunt (20,20) en ga naar elke hoek. Waarom vier lijnen in plaats van de twee die gaan van hoek tot hoek? Ik vermoed dat het is omdat de marcherende mieren animatie later ziet er een beetje koeler als alle mieren zijn afkomstig van het centrum in plaats kriskras.

Ik hou van de mooie syntaxis van het pad, maar laten we alleen gebruik maken van twee lijnen om anders te zijn:

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

Als we onze slag om zowel onze rect en lijn, het werkt! Maar we zien wel een beetje raar probleem:

rect, lijn {
fill: none;
beroerte: #000;
stroke-width: 1px;
vector-effect: non-scaling-stroke;
}

De buiten lijn wordt dunner dan de binnenste lijnen, en de reden is dat de buitenste rechthoek is het omhelzen van de exacte buiten de SVG. Als een resultaat, iets van de buitenwereld is afgesneden. Het is behoorlijk frustrerend, maar slagen in SVG altijd dwars over de paden die ze op zitten, dus precies de helft van de buitenste lijn (0.5 px) is verborgen. We kunnen het dubbele van de rechthoek alleen om “fix”:

rect, lijn {
fill: none;
beroerte: #000;
stroke-width: 1px;
vector-effect: non-scaling-stroke;
}

rect {
stroke-width: 2px;
}

Maxim ook gooit een shape-rendering: geometricPrecision; op omdat er, blijkbaar, het reinigt dingen een beetje op non-retina displays.

Stap 3: Mieren zijn streepjes

Andere dan de vreemde schrijlings op-de-lijn ding, SVG slagen bieden manier meer controle dan CSS grenzen. Bijvoorbeeld, CSS heeft gestreepte en gestippelde rand stijlen, maar heeft geen controle over. In SVG, hebben we controle over de lengte van de streepjes en de ruimte tussen hen, dankzij de stroke-dasharray:

rect, lijn {

/* 8px streepjes met 2px ruimtes */
beroerte-dasharray: 8px 2px;
}

We kunnen zelfs echt raar met:

Maar de mieren er goed uitzien met 4px streepjes en 4px spaties tussen, dus we kunnen gebruik maken van een verkorte notatie van een beroerte-dasharray: 4px;.

Stap 5: het Animeren van de mieren!

De “marching” onderdeel van “marcherende mieren” komt van de animatie. SVG slagen ook de mogelijkheid om te worden gecompenseerd door een bepaalde afstand. Als we kiezen een afstand die net zo lang als de dash en de kloof samen, animeer de offset van die afstand krijgen we een soepele beweging van de lijn design. We hebben zelfs een overdekte dit eerder te maken van een effect van een SVG-dat trekt zelf.

rect, lijn {

beroerte-dasharray: 4px;
beroerte-dashoffset: 8px;
animatie: beroerte 0.2 s lineaire oneindig;
}

@keyframes beroerte {
{
beroerte-dashoffset: 0;
}
}

Hier is onze replica en het origineel:

Zie de Pen SVG Marcherende Mieren door Maxim Leyzerovich (@ronde) op CodePen.

Nogmaals, misschien wel mijn favoriete onderdeel hier is de scherpe 1px lijnen die niet beperkt door de grootte of de beeldverhouding, en hoe weinig code nodig is om het allemaal samen.