# 172: Tangan SVGing Garis Lengkung - Trik CSS

Anonim

Saya menemukan bahwa 98% dari semua penggunaan SVG saya berasal dari file SVG yang telah dibuat sebelumnya atau seni vektor di beberapa perangkat lunak desain yang pada akhirnya saya ekspor sebagai SVG. Tidak terlalu sering saya memanipulasi koordinat benda-benda dalam kode SVG. Hei, aku bahkan punya buku tentang semua itu.

Tapi sesekali, itu pantas, dan bahkan mungkin sedikit menyenangkan. Dalam hal ini, saya ingin menggambar garis yang cukup spesifik dengan beberapa putaran lembut di dalamnya. Dengan sedikit pengetahuan tentang sintaks jalur SVG (alat gambar SVG yang paling aneh, tetapi paling kuat) kita dapat menyelesaikannya tanpa banyak keributan.

Demo yang kami mainkan dalam video:

Lihat Pen
KOvPaa oleh Chris Coyier (@chriscoyier)
di CodePen.

Ide asli:

Lihat Pen
Lighted Path oleh Chris Coyier (@chriscoyier)
di CodePen.

Ingatlah bahwa yang tidak kami selesaikan adalah menyesuaikan SVG sedemikian rupa sehingga sudut membulat tetap dalam rasio aspek yang bagus sementara SVG lainnya fleksibel dan dapat mengisi ruang vertikal dan horizontal. Itu mungkin, hanya saja lebih rumit dan kita harus membahasnya lain kali.