Modify an element’s stroke

In many cases, you may want to modify an element’s stroke: change its color, transparency, width, line ends or joins. Any type of element can have a visible stroke: rectangle, circle, line, path or even text.

All properties can be edited in the Stroke panel on the right side of the app:

svg stroke path

You can change the Stroke-linecap and Stroke-Linejoin properties to:

Butt - default setting that ends the stroke with a sharp 90-degree angle
Square - similar to Butt, it extends the stroke beyond the length of the path
Round  - adds a radius that smooths out the start and end points

While working on a path animation, you may want to change the Dashes and Offset values. You can read more about these and learn how to create a path animation here.

More articles:

Create a path animation

Change the color of an element

Still got questions? Send us an email to and we will get back to you as soon as we can.