# 172: Ručné SVGovanie zakrivenej čiary Triky CSS

Anonim

Zistil som, že 98% všetkého môjho použitia SVG pochádza z vopred vytvorených súborov SVG alebo vektorového umenia v nejakom dizajnovom softvéri, ktorý nakoniec exportujem ako SVG. Nie veľmi často ručne manipulujem so súradnicami vecí v kóde SVG. Hej, dokonca som o tom všetkom dostal knihu.

Ale raz za čas je to vhodné a možno aj trochu zábavné. V tomto prípade som chcel nakresliť celkom konkrétnu čiaru s niekoľkými mäkkými zákrutami. S trochou znalosti syntaxe cesty SVG (najpodivnejšia, ale najsilnejšia z nástrojov na kreslenie SVG) to zvládneme bez väčších problémov.

Ukážka, s ktorou sme hrali vo videu:

Prezrite si pero
KOvPaa od Chrisa Coyiera (@chriscoyier)
na stránkach CodePen.

Pôvodný nápad:

Pozrite si
cestu osvetlenú perom od Chrisa Coyiera (@chriscoyier)
na stránke CodePen.

Pamätajte, že to, čo sme neurobili, je nastavenie SVG tak, aby zaoblené rohy zostali v peknom pomere strán, zatiaľ čo zvyšok SVG bol pružný a mohol vyplniť vertikálny a horizontálny priestor. To je možné, je to len komplikovanejšie a budeme to musieť pokryť inokedy.