In this previous post, I was concerned that I would have to perform an SVG hack in order to complete the sequence of building this pattern as shown above.
After studying 10-star 3, I discovered regularities and repetitions that — along with the dotted lines scaffolding — could provide most of the x,y coordinates needed simply by using trig and simple arithmetic. I did use a trial-and-error approach in two instances.
Here is what my SVG looked like with the scaffolding.
Here it is without the strapwork.
You can click on the above image, and see the SVG in action on CodePen.
Now all that’s left to do is figure out how to hide the lines marked red, which would complete the non-tesselated part of the Star 10-3 series of posts.
To accomplish this, I will see if positioned markers are supported by any of the browsers, and if so, I will see if that attribute can be used as a hack to eliminate the visibility of part of a path (without using any actual markers).
Turns out markers are not yet fully implemented by the two main browsers, so trying an SVG marker refX-refY hack will not work.* Since clip-path isn’t suitable to solve the problem (given that there is no “inverse clip” concept in SVG), my only solution was to break each vector in my polyline into two shorter lines, leaving a space in the middle between the two of them that allows for the inner star shape to form.
And here it is, though still needing some touching up here and there.
*I did end up thinking of a simple hack that does the work “positioned markers” and/or CSS fill-position were supposed to solve. Demo in future post.
# # #