Hey all -- as I'm back to Modulo.js tutorial writing, I am always looking for more content ideas. Have an idea? Be sure to let me know in the comments!

Previously, I showed how to use the -store= processor to make a reactive shared State store between components, a deep dive into Modulo's Markdown-HTML file format, or, last week, how to make a circular text-art tool. Today, let's make another SVG text design tool, except using <path> instead of <circle>. While slightly more complex, using <path> elements for Text allows for fun and arbitrary text arrangements -- and, most importantly, is supported by Chrome!

The final result

Try it out now, in less than 30 seconds: 🚀🚀🚀 Want to skip ahead? Scroll to the end and copy the ~30 lines of HTML code into any local HTML file, and then open it in your browser. Modulo has no dependencies and even runs embedded in local HTML files, so it's really that easy!

Starting with SVG and text input

Let's add an SVG along with a text input, bound to the text. Let's use a <Template> and a <State> component parts, as follows:

In this snippet, we have a <input> element that's bound to State using [state.bind]. If the State concept is giving you conceptual trouble, consider warming up with this tutorial on creating a font design tool, or the the corresponding section in the interactive Modulo tutorial. If SVG <textPath> elements are confusing you, check out MDN's documentation. After that, we have an <svg> element, containing <path> and <textPath> elements. These are linked together with id="curve", and href="#curve" respectively. The {{ state.text }} links the state to the <textPath> -- also in previous tutorial. But unlike the previous tutorial, we'll use a <path> element that takes a d= attribute, which consist of a series of x,y coordinate points for each point (dot) on the curve itself ([documented here](It's not 100% needed to fully understand the syntax here, but if you are curious, check out MDN's tutorial.)).

Okay, I realize that's dense code, but bare with me -- it's only a few more steps to get the tool working!

Moving the points to State

We currently only have state.text. We need to also store the points themselves, so we can adjust them with sliders. Let's move to state the Array of points:

The :='[ and ]' syntax is the syntax for creating Arrays in Modulo: If this concept is new to you, consider reading the section on Container types in part 4 of the Modulo.js interactive tutorial. Next, we need to put the points back into our SVG. We can use the |join:' ' filter to combine the points with spaces:

Creating a hard-coded, rotated range input

At this point, we have moved the points into the State variable, but we still don't have range sliders for them! Let's do that next. We'll use a "for-loop" for this, so we can repeat the same range-slider code for every point in our point Array. But before we do that, let's start with a "hardcoded" range-slider, which will only control "Point #2", just to make sure we can at least control one of them successfully:

Let's decipher this: The label and input have style= attributes to space it by 5% width of the page, rotate the input 90 degrees, and move it 60x60 pixels. The name="points.2.1" (equivalent to points[2][1] in other languages) causes the input to control one specific value in the State variable.

Duplicating the input with a for-loop

We've successfully gotten an input to work with a single point (points.2). We could copy and paste this name="points.2.1" code 6 times (once for each point), altering each copy to name="points.3.1", name="points.4.1" etc. This would allow us to control every point. Or, we could save ourselves time, and use the Modulo Template for loop. Let's see how that looks:

Note the only difference here is the 2 is replaced with {{ index }} -- the "index" of the current point we are looping through.

<x-CurvedTextArtTool> - Embeddable results

Add the range smooth-rendering ="input" tweak, explained in this tutorial, and we get the following results. Hope you enjoy this tutorial -- follow for more like this!