Breaking up is hard to do

The thing about JS/SVG/CSS is that it can get so darn tricky.

For example, it took me a while to figure out how these concise lines of code at the bottom of this page perform their sleight-of-hand magic  It’s easy once you realize toggle can silently add or remove classes from its associated object. Who knew?

In other news, not a lot of practical examples around as to how to manipulate the SVG DOM. After reading up on the pertinent Mozilla reference document regaring SVGElement attributes and methods, I was able to make this code work.

<path
d="m 10,50 h 100,50 m 200,0 H 510"
style="stroke:#000000;stroke-width:2"
id="line1" />

<script>
var el = document.getElementById("line1");
var len = el.getTotalLength();
console.log("line1 length = ", len);
var mylist = el.getAttribute('d');
console.log(" Line 1 attr 0 = ", mylist); 
</script>

Notice the path output:

SVG DOM

The shadow DOM is likely to prove quite useful by enabling me to add private methods to various elements.

For instance, I need a method for creating shapes that have gaps in them — but how does one delete segments between two non-endpoint SVG nodes when there is no method for that?

After trying a variety of hacks with the SVG <line> element, I finally realized I might be able to directly code a <path> to accomplish this .

inkscape

First, I hand coded the path for a horizontal line (id=line1) with a gap in it.

Then I used Inkscape to do so for a sloped  one (id=line4).

It worked like a dream.

Note that

getTotalLength()

returns the value of the drawn portion of a line only.

Now that I figured out where SVG keeps its path info, this is going to be how I will use JS to produce shapes with gaps in them.

Perhaps extend the SVG <line> element interface with shadow methods, as follows:

~.line.split (lineID, start_x, start_y, end_x, end_y)

~.line.splitByDistance (lineID, start_x, start_y, len)

Naturally these functions will have to call on a helper function that understands how to output (limited) path instructions. This reverse engineering task is likely to be non trivial.

Here’s my plan plan going forward:

1. implement a formula (there’s tons of them on the Web) for finding 10 equidistant points on a circle in JS

2. create via JS the inner lines needed to render Template A

3. implement in JS a formula for calculating the intersection of those lines  (again, lots of ways to do this that one can Google)

4. create inner star using the path split formula (see above) for specific line pairings

5. add exterior polygons to complete motif (already done, see prior SVGs)

6, create tessellation of Pattern 1 (already done, see prior SVGs)

7. explore shadow dom idea

I figure this might take a week (fiddling with the code a few hours a day) or so to get just right. So by August 19th, I might have an preliminary proof-of-concept of what I’m trying to accomplish with this blog.