Making an infinity symbol with SVG
How do I make an infinity symbol in SVG, without using an vector graphics editor?
This seems like an odd thing to do, but an infinity symbol is pretty basic, and SVG is a simple format, so this shouldn’t be too tricky.
A path with a couple bezier curves and a couple lines should fit the bill. There are various tutorials about them, but here I will take a naive approach, using the MDN docs which I turn to very often for frontend web development. The SVG tutorial on MDN has the primitive for the cubic curve C, which is C x1 y1, x2 y2, x y. The first two points are control points, and the last point is the end point. The start point is the previous point in the SVG path. A full cubic curve is going to look be of the form M startx starty C x1 y1, x2 y2, x y. MDN also provides this image of some cubic curves with the points shown, which is going to be useful for constructing an infinity symbol by writing code:
Symmetrical cubic curves can be created with symmetrical points. The start point and the end point have the same Y value for the start and the end, as well as the the same Y value for the two control points. The x values are the same distance from the center. If you connect the dots without intersecting, it forms a square or a trapezoid. For drawing an infinity symbol something like the lower-right curve is needed, but with the X and Y values flipped.
I built this using React and CodeSandbox. Rather than use plain SVG, I generated the SVG using JavaScript and JSX. These functions create cubic curves, as well as straight lines, which will be used for the guides and to connect the curves to make the infinity symbol:
Here’s my first attempt at making the left side of the infinity symbol:
The points above, for x it’s 30, 10, 10, 30. For y it’s 30, 40, 60, 70. If you subtract 50 from each of the y points, you get -20, -10, 10, 20. This is the trapezoid pattern I explained above.
In this first attempt I got it a bit backwards — instead of the ends of the curve closing inward, they’re still moving outward from the vertical center (albeit at a decreasing rate). Before fixing it, I’m going to make a function that takes four values which describe the location of the points. Two values are the x coordinates, and the other two values are the distances between the y coordinates:
Here’s the updated component function:
Here’s the CodeSandbox and this is what it looks like:
Much better!
Putting it all together
To finish it, I extract the curve to a component, make it so I can toggle the guides, and create a corresponding curve on the right side and join the endpoints together with straight lines. Here is the full component:
This is what it looks like:
You can play around with it in CodeSandbox.
Benjamin Atkin is working on resources.co and currently looking for JavaScript freelance work.
