Lessons on SVG paths and/or lines

I just wanted to say how helpful this app as well as it’s support staff have been to me. It has been an absolute pleasure learning with Grasshopper. I would like to make a request or suggestion if I may. Is there any way you guys and/or gals at Grasshopper could do some new lessons on how to make SVG shapes with “path” like how you made those hand shapes for that international left handers day thing, and mabe also how to make SVG lines with “line”? I tried to understand “path” by studying the code snippet from the left handers thing but I’m super stumped. I think I understand everything but the alpha-numeric data that is the path stored in the handPath variable. the part that says “let handPath = …” I can’t make sense of that data.

Hey there,

We don’t have any plans to teach SVG paths, but I’ve made about 2 (fairly simple) custom SVGs in the last year using D3, so I can talk about it a bit.

line is another type of D3 shape you can make. I don’t think we use it in any lessons, but you can use it in the playground.

A line needs a coordinate where to start (x1, y1), and a coordinate where to end (x2, y2).

There’s also stroke-width to set the thickness of the line, and fill to set the color.

let line = svg.append('line')
                    .attr('x1', 10)
                    .attr('y1', 15)
                    .attr('x2', 100)
                    .attr('y2', 105)
                    .attr('stroke-width', '5')
                    .attr('fill', 'red');

This makes a red line about 5 pixels thick from 10, 15 to 100, 105.

If you want something slightly more complicated than a line, you can make a path. A path is like telling the computer to hold a marker, and saying “put your marker down at this coordinate, then move over here, then there, and make a curve here like this”.

Here’s a basic one:

let path = svg.append('path').attr('d', 'M 10 10 L 100 10 L 100 100');

This is telling the computer "move your pen to 10, 10, draw a line to 100, 10, then draw a line to 100, 100". Capital letters mean absolute position (the coordinate to go to), whereas lowercase means relative (where to go in relation to where you are now).

Paths are complicated, and are rarely coded by hand. Usually computer programs will translate a graphic designer’s drawing into an svg path, and then the resulting value is just copy/pasted. That’s how the path for the Left Handers Day notification was made. Still, it’s a fun way to mess around for an afternoon or two.

There’s a tool to play around with paths here.

If you want to learn more about SVG paths and how they work, do a lot of googling, as I did. This article is pretty helpful, as is this tutorial.

Good luck!
Ben

Once again the support team for Grasshopper comes through in a big way and with a swift response. Thank you so much. I had a feeling that was the way paths worked.

2 Likes