nou

Curved line with SVG path

1 min read ·

Draw curved line using path element in SVG.

create post

D:\blank>hugo new content tests\curved-line-with-svg-path.md
Content "D:\\blank\\content\\tests\\curved-line-with-svg-path.md" created

Put it in tests folder first while re-develop svgpath.html from layouts\shortcodes in plaintext to layouts\shortcodes\blank.

test 1

{{< blank/svgpath >}}
B_STYLE red,3,#ccf
M 50 50 l 100 0
v 100 h -100 z

B_STYLE blue,10,#aaf
M 100 120 l 100 0
v 100 h -100 z
{{< /blank/svgpath >}}

test 2

{{< blank/svgpath >}}
B_STYLE #f44,3,#fcc
M 150 100 l 50 0 l 0 -50 l -100 0 l 0 100 l 100 0 m 0 -25
m -25 0 l -50 0 l 0 -50 l 50 0

B_STYLE #080,4,none
M 50,50
A 100 100 0.0 0 1 200 150
Z
{{< /blank/svgpath >}}

features