# 172: Eğri Bir Çizgiyi Elle SVG Oluşturma - CSS Hileleri

Anonim

Tüm SVG kullanımımın% 98'inin, nihayetinde SVG olarak dışa aktardığım bazı tasarım yazılımlarındaki önceden oluşturulmuş SVG dosyalarından veya vektör çizimlerinden geldiğini görüyorum. Çok sık değil, SVG kodundaki şeylerin koordinatlarını elle manipüle etmiyorum. Hey, tüm bunlarla ilgili bir kitabım bile var.

Ama arada bir uygun ve hatta biraz eğlenceli. Bu durumda, içinde birkaç yumuşak dönüş olan oldukça spesifik bir çizgi çizmek istedim. SVG'nin yol sözdizimi (SVG'nin çizim araçlarının en tuhaf, ancak en güçlüsü) hakkında biraz bilgi sahibi olarak, bunu fazla telaş olmadan halledebiliriz.

Videoda oynadığımız demo:


CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem KOvPaa'ya bakın
.

Orijinal fikir:


CodePen'de Chris Coyier (@chriscoyier) tarafından yazılan Kalem Işıklı Yolu
görün.

SVG'yi, SVG'nin geri kalanı esnek ve dikey ve yatay alanı doldurabilirken, yuvarlak köşeler güzel bir en-boy oranında kalacak şekilde ayarlamadığımızı unutmayın. Bu mümkün, sadece daha karmaşık ve bunu başka bir zaman ele almamız gerekecek.