# 172: Hånd SVGing en buet linje - CSS-tricks

Anonim

Jeg finder ud af, at 98% af al min SVG-brug kommer fra foruddannede SVG-filer eller vektorkunst i noget designsoftware, som jeg i sidste ende eksporterer som SVG. Ikke super ofte håndmanipulerer jeg koordinaterne for ting i SVG-koden. Hej, jeg har endda en bog om alt det der.

Men en gang imellem er det passende og måske endda lidt sjovt. I dette tilfælde ville jeg tegne en temmelig specifik linje med et par bløde sving i. Med lidt kendskab til SVGs stisyntaks (den mærkeligste, men mest magtfulde af SVGs tegneværktøjer) kan vi få det gjort uden meget besvær.

Demo, vi spillede med i video:

Se Pen
KOvPaa af Chris Coyier (@chriscoyier)
på CodePen.

Oprindelig idé:

Se Pen
Lighted Path af Chris Coyier (@chriscoyier)
på CodePen.

Husk, at det, vi ikke fik gjort, er at justere SVG'en, så de afrundede hjørner forblev i et godt formatforhold, mens resten af ​​SVG var fleksibelt og kunne udfylde lodret og vandret rum. Det er muligt, det er bare mere kompliceret, og vi bliver nødt til at dække det en anden gang.