Jeg finner ut at 98% av all SVG-bruken min kommer fra forhåndsopprettede SVG-filer eller vektorkunst i noen designprogramvare som jeg til slutt eksporterer som SVG. Ikke veldig ofte håndmanipulerer jeg koordinatene til ting i SVG-koden. Hei, jeg har til og med en bok om alt dette.
Men en gang i blant er det passende, og kanskje til og med litt morsomt. I dette tilfellet ønsket jeg å tegne en ganske spesifikk linje med et par myke svinger i. Med litt kunnskap om SVGs stisyntaks (den rareste, men kraftigste av SVGs tegneverktøy) kan vi få det til uten mye oppstyr.
Demo vi spilte med i video:
Se pennen
KOvPaa av Chris Coyier (@chriscoyier)
på CodePen.
Opprinnelig idé:
Se Pen
Lighted Path av Chris Coyier (@chriscoyier)
på CodePen.
Husk at det vi ikke fikk gjort, er å justere SVG slik at de avrundede hjørnene holdt seg i et pent sideforhold mens resten av SVG var fleksibel og kunne fylle vertikal og horisontal plass. Det er mulig, det er bare mer komplisert, og vi må dekke det til en annen gang.