SVG Marscherande Myror

0
23

Maxim Leyzerovich skapat marscherande myror effekt med vissa superglansigt enkel SVG.

Se Pennan SVG Marscherande Myror av Maxim Leyzerovich (@runda) på CodePen.

Låt oss bryta isär den bit för bit och se alla små delar tillsammans.

Steg 1: Rita en rektangel dang

Vi kan sätta upp våra SVG som en kvadrat, men har bildförhållande ignoreras och har det flex i vad rektangel som vi skulle vilja.

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

Direkt, vi påminns om att samordna systemet inne i en SVG är en enhet mindre. Här ska vi säga, “Denna SVG är en 40×40 nätet. Nu rita en rektangel som omfattar hela nätet.” Vi kan fortfarande storlek hela SVG i CSS men. Låt oss tvinga den att vara exakt hälften av visningsområdet:

svg {
position: absolute;
bredd: 50vw;
höjd: 50vh;
top: 0;
rätt: 0;
bottom: 0;
left: 0;
margin: auto;
}

Steg 2: Kampen squish

Eftersom vi gjorde box och grid så flexibel att vi kommer att få några mosa att vi nog kunde ha förutsett. Säg att vi har en stroke som är 2 breda i vårt koordinatsystem. När SVG är smal, det är fortfarande i behov av att dela upp det smala utrymme till 40 enheter. Det innebär att linjen kommer att vara ganska smala.

Vi kan stoppa det genom att berätta för stroke vara icke-skalning.

rect {
fyllning: none;
stroke: #000;
stroke-width: 10px;
vektor-effekt: icke-scaling-stroke;
}

Nu stroke kommer att bete sig mer som en gräns på ett HTML-element.

Steg 3: Rita korset linjer

I Maxim ‘ s demo, han drar linjer i mitten med fyra stigen delar. Kom ihåg att vi har en 40×40 koordinatsystem, så matte är bra:

<sökväg d=’M 20,20 L 40,40′ />
<sökväg d=’M 20,20 L 00,40 ‘/>
<sökväg d=’M 20,20 L 40,0′ />
<sökväg d=’M 20,20 L 0,0’ />

Dessa är fyra rader som börjar i exakt centrum (20,20) och gå till varje hörn. Varför fyra rader istället för två som går hörn till hörn? Jag misstänker att det beror på att de marscherande myror animation senare ser lite coolare om alla myror är som utgår från centrum snarare än kors och tvärs.

Jag älskar den fina syntax av vägen, men låt oss bara två linjer att vara en annan:

<linjen x1=”0″ y1=”0″ x2=”40″ y2=”40″></line ->
<linjen x1=”0″ y1=”40″ x 2=”40″ y2=”0″></line ->

Om vi tillämpar vår stroke för både våra rect och linje, det fungerar! Men vi ser en något konstig fråga:

rect, linje {
fyllning: none;
stroke: #000;
stroke-width: 1px;
vektor-effekt: icke-scaling-stroke;
}

Utanför linjen verkar tunnare än de i rader, och anledningen är att den yttre rektangeln är kramas exakt utanför SVG. Som ett resultat, något utanför det som är avskuren. Det är ganska frustrerande, men stroke i SVG alltid sträcker sig över de vägar som de sitter på, så exakt hälften av de yttre stroke (0.5 px) är dolda. Vi kan dubbla rektangel enbart för att “fixa” det:

rect, linje {
fyllning: none;
stroke: #000;
stroke-width: 1px;
vektor-effekt: icke-scaling-stroke;
}

rect {
stroke-width: 2px;
}

Maxim också kastar en form-rendering: geometricPrecision; på det eftersom, tydligen, det rensar upp saker och ting lite på icke-retina-skärmar.

Steg 3: Myror är streck

Andra än den konstiga gränsöverskridande-the-line sak, SVG slag erbjudande sätt mer kontroll än CSS gränser. Till exempel, CSS har streckade och prickade border stilar, men har ingen kontroll över dem. I SVG, vi har kontroll över längden på strecken och mängden utrymme mellan dem, tack vare stroke-dasharray:

rect, linje {

/* 8px streck med 2px utrymmen */
stroke-dasharray: 8px 2px;
}

Vi kan även få riktigt konstiga med det:

Men myrorna ser bra ut med 4px streck och 4px utrymmen mellan, så att vi kan använda en kortform av stroke-dasharray: 4px;.

Steg 5: Animera myror!

“Marsch” del av “marscherande myror” kommer från animation. SVG-stroke har också förmågan att kompenseras med ett visst avstånd. Om vi välja ett avstånd som är exakt lika länge som det dash och klyftan tillsammans, sedan animera kompenseras av att avståndet, kan vi få en smidig förflyttning av stroke design. Vi har även täckt detta innan för att skapa en effekt av en SVG-som drar till sig.

rect, linje {

stroke-dasharray: 4px;
stroke-dashoffset: 8px;
animation: stroke 0.2 s linjära oändlig;
}

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

Här är våra kopia och originalet:

Se Pennan SVG Marscherande Myror av Maxim Leyzerovich (@runda) på CodePen.

Igen, kanske min favorit del här är den skarpa 1px linjer som inte begränsas av storleken eller bildförhållande på alla och hur lite kod som krävs för att sätta ihop det hela.

SHARE
Previous articleSVG Marsjerande Maura
Next articleSVG Marching Ants