# 172: Käsi SVGing kaareva viiva - CSS-temppuja

Anonim

Huomaan, että 98% kaikesta SVG-käytöstäni tulee ennalta luotuista SVG-tiedostoista tai vektoritaiteista joissakin suunnitteluohjelmistoissa, jotka vihdoin lopulta SVG: nä. En ole kovin usein manipuloiva käsin SVG-koodin asioiden koordinaatteja. Hei, minulla on jopa kirja kaikesta siitä.

Mutta joskus, se on tarkoituksenmukaista, ja ehkä jopa hieman hauskaa. Tässä tapauksessa halusin piirtää melko tarkan viivan, jossa on pari pehmeää käännöstä. Pienellä tietämyksellä SVG: n polun syntaksista (outo, mutta tehokkain SVG: n piirtotyökaluista) voimme saada sen aikaan ilman suurta hässäkkää.

Demo, jonka kanssa soitimme videossa:

Katso
Chris Coyierin (@chriscoyier) kynä KOvPaa
CodePenistä.

Alkuperäinen idea:

Katso
Chris Coyierin (@chriscoyier) kynän valaistu polku
CodePenistä.

Muista, että mitä emme saaneet aikaan, on SVG: n säätäminen siten, että pyöristetyt kulmat pysyivät mukavassa kuvasuhteessa, kun taas muu SVG oli joustava ja pystyi täyttämään pystysuoran ja vaakasuoran tilan. Se on mahdollista, se on vain monimutkaisempaa, ja meidän on käsiteltävä sitä toisen kerran.