Paths in SVG: <path>

Defining paths in svg:

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1000 200">
  <path stroke="#E4AF4C" stroke-width="2" fill="#F4D37D" d="M579.111,128.449c-4.9-4.2-10.6,0.5-19-4c-2.2-1.2-9.1-5.7-18.3-11.7c1.7-0.9,3-1.9,4.1-3
	c3.9-4.1,4.5-7.1,4.6-8.2c1.2-1,4.8-4.7,5.2-13.2c0.3-6-2.6-8.7-7.1-11c-0.2-0.1-0.5-0.3-0.7-0.4c-1-0.7-1.9-1.9-2.7-3
	c-0.5-0.7-1-1.3-1.6-1.9c-1.4-1.5-2.9-2.9-4.3-4.1c2.6-3.2,4.5-5.5,5.5-6.5c6.6-6.9,13.5-4.3,16.8-9.8c3.3-5.5,1.6-11.9-2-12.5
	c-2.7-0.4-5.2,1.1-7,0.3c-0.7-0.3-1.3-1-1.8-2.3c-0.9-2.5-1.3-5.8-4.6-6c-4.5-0.2-11.6,0.8-10.7,9s5.1,6.2-5.9,21.7l-0.1,0.1
	c-2-0.7-3.9-1.1-5.7-1.1c-1.2,0-2.5,0.2-3.6,0.5c-5.9,1.6-9,3.6-11,4.9c-1.2,0.8-2.1,1.3-2.8,1.3c-0.3,0-0.6-0.1-0.9-0.2
	c-0.6-0.2-1.2-0.6-2-1c-2.2-1.2-5.1-2.9-8.4-2.9c-2.2,0-4.4,0.8-6.3,2.4c-2.2,1.8-2.6,4-3.1,6c-0.2,0.8-0.3,1.6-0.6,2.5
	c-8.7-6-15-10.4-16.2-11.4c-4.6-3.8-1.5-14.7-5.8-16.5c-4.3-1.9-8.6,3.8-13.6,2.9c-5-0.9-10.8,0.7-10.7,8.4
	c0.1,7.7,10.3,6.9,15.1,10c1.6,1,10.3,6.7,21.8,14.3c-2.3,0.9-5.2,1.7-8.8,2.5c-26.1,5.9-47.9,11.7-49.9,21.4
	c-1,4.8,0.5,8.2,4.4,10.1c0.1,0.1,0.2,0.3,0.4,0.4l0.6,0.6c0.4,0.4,0.6,1,0.8,1.6c0.2,0.5,0.4,1.1,0.8,1.6c0.7,1.2,1.6,2.4,2.8,2.4
	c1.3,0,2-1.4,2.2-1.8c0.2-0.5,0.4-1,0.5-1.3c0.3-0.9,0.3-1.1,1.3-1.2h0.1c0.8,0,1.4,0.4,2.1,1c0.5,0.4,1.1,0.9,2,1.2
	c0.7,0.3,1.1,0.4,1.5,0.4c1.2,0,1.3-1.1,1.4-1.6c0-0.4,0.1-0.8,0.3-1.2c0.1-0.3,0.3-0.6,0.6-0.8c0.5,0,1-0.1,1.5-0.2
	c0.2,0.1,0.4,0.2,0.6,0.4c0.1,0.1,0.5,0.7,0.7,1.2c0.8,1.4,1.5,2.8,2.7,2.8h0.1c1-0.1,1.3-1.3,1.8-3c0.2-0.7,0.5-1.8,0.7-2.1
	l0.3-0.3c0.5-0.1,1.1-0.2,1.7-0.3c0.3,0.3,0.6,0.8,0.9,1.3c0.8,1.2,1.7,2.8,3.4,2.8c0.3,0,0.6-0.1,0.9-0.2c1.3-0.4,2-1.9,2.7-3.2
	c0.7-1.4,1.2-2.4,1.9-2.4c0.3,0,0.8,0.2,1.2,0.5c0.4,0.3,0.8,0.7,1.1,1.2c0.7,0.9,1.5,1.9,3,1.9c0.4,0,0.8-0.1,1.2-0.2
	c1.7-0.6,2.2-2,2.6-3.1c0.2-0.6,0.4-1.2,0.8-1.7c0.7-0.9,1.3-1.4,1.8-1.4c0.4,0,0.8,0.3,1.1,0.7c0.2,0.2,0.3,0.5,0.5,0.7
	c0.5,0.8,1.1,1.7,2.2,1.7c0.7,0,1.4-0.4,2.2-1.3c0.5-0.5,0.8-1.2,1-1.8c0.4-1.1,0.6-1.5,1.3-1.6h0.1c0.3,0,0.5,0.2,0.8,0.7
	c0.4,0.5,1,1.3,2.1,1.3c0.3,0,0.5,0,0.8-0.1c0.9-0.3,1.5-1.1,1.9-1.8c0.3-0.5,0.6-0.9,0.9-1.1c0.4-0.2,0.7-0.2,0.8-0.3
	c0,0.2,0,0.5-0.2,1.1c-2,1.7-4.4,3.5-7,5.2h-0.2c-0.6,0-1.4,0-2.2,0.2c-1.9,0.3-2.6,1.3-3.3,2.3c-0.3,0.4-0.6,0.9-1.1,1.3
	c-0.5,0.5-0.9,0.5-1.1,0.5c-0.3,0-0.7-0.1-1.1-0.2c-0.6-0.2-1.2-0.4-2-0.4h-0.2c-2.2,0.1-2.7,1.2-3.2,2.3c-0.1,0.3-0.3,0.7-0.5,1
	c-0.2,0.4-0.4,0.6-0.5,0.7c-0.1,0-0.1-0.1-0.2-0.1c-0.4-0.3-0.9-0.6-1.8-0.8c-0.4-0.1-0.7-0.1-1.1-0.1c-1.6,0-2.3,1.1-2.8,2
	c-0.1,0.2-0.2,0.4-0.4,0.6c-0.7,1.1-0.9,1.1-1.1,1.1c-0.3,0-0.7-0.1-1.3-0.3l-0.8-0.2c-0.7-0.2-1.4-0.4-2.1-0.4
	c-1.2,0-2.1,0.6-2.8,1.6c-0.4,0.7-0.5,1.3-0.6,1.9c-0.2,1-0.2,1-0.8,1h-0.2c-0.2,0-0.7-0.2-1.1-0.4c-0.6-0.3-1.4-0.7-2.2-0.7
	c-0.7,0-1.3,0.3-1.8,0.9c-0.6,0.7-0.5,1.7-0.5,2.4c0,0.4,0.1,0.9,0,1c-0.1,0.1-0.3,0.2-0.7,0.2c-0.3,0-0.6-0.2-1-0.4
	c-0.5-0.3-1.2-0.7-2-0.7h-0.3c-2.6,0.4-3.9,5.5-3.7,7.6c0.2,3.7,2,4.2,5.8,4.9c0.7,0.1,1.5,0.2,2.4,0.2c7.7,0,19.1-4.9,31.3-10.2
	c-6.4,8-11,13.8-12,15c-3.6,4.4-13.6,6.9-11.3,14.2c2.3,7.3,8.3,7,12.8,4.6s10.3,1.7,13.8-1.5s-2.8-12.5,0.4-17.5
	c1.1-1.7,8.4-11.3,17.8-23.6c4.7-1.7,9.3-3,13.4-3.7c8.2-1.4,14.8-2.6,20.2-3.8c7.4,5,13.5,9.2,16.8,11.7
	c15.3,11.3,10.7,10.7,12.4,18.8c1.7,8.1,8.7,6.8,13,5.2c3.1-1.2,2.4-4.5,2.5-7.1c0.1-1.4,0.4-2.2,1-2.7c1.5-1.3,4.3-0.7,6.8-1.9
	C584.411,139.349,584.011,132.649,579.111,128.449L579.111,128.449z" />
</svg>

Breaking it down

Paths quickly become too complex to create manually and you’ll probably want to create such complex graphics involving paths using a vector graphic editor like Adobe Illustrator. Still, it’s good to know that the path data is defined with the d attribute. Here’s the paths spec if you want to geek out.

✖ Clear

🕵 Search Results

🔎 Searching...