Pizza rays


svg pizza
click for pickup or delivery

Unless you’re from or have lived in NY (my hometown!), you probably might not find the pun particularly funny.  No worries.

Everything you see is SVG. The image above is a screenshot of the SVG running on my desktop. You can click on it to see the SVG in CodePen.

Unfortunately CodePen’s 1 MB size limits forced me to remove the Ray’s Pizza logo.  This brings up an important point.  SVG files can quickly become too large, if you are using them to produce via Inkscape (or some other design tool) even slightly elaborate logos or designs that require a lot of path work. (Beyond the fact that reading this SVG output is incomprehensible to humans.)

For example, my html file with the Ray’s logo was a whopping 1.62MB.

Without the logo, it was 2.22 kb.

The good news is that Islamic patterns are based largely on geometry.  And if we’re talking geometry, my theory is that I may be able to turn much of the patterns from [BR1 – see resources page] into JS driven equations, resulting in extremely efficient file sizes containing parameterized motifs that are dynamically programmable.

If you examine the pen, there are a few minor JS-SVG “tricks” worth pointing out:

  1. create and clear SVG elements using loops and functions in JS vioa the SVG DOM, instead of writing out the verbose tag elements that comprise much of SVG..  The clear function is especially interesting, in that it coaxes an HTMLCollection into an arrray whose nodes can be efficiently removed in a standard way.
  2. Insert HTML input box inside SVG via the foreignobject gag, and implement an HTML event button that is linked to a listening JS function
  3. Fill a circle element with an SVG logo

If you want to see the full SVG in action , go here.

This SVG shows some promise that Template A, for example, is one that might be able to written using JS code instead of repetitious tags.

One of tke keys, as we saw earlier, is how to calculate the intersection of two or more rays, and algorithmically cut off sections of rays that I may not wish to appear on a design or motif that I’m creating.

In effect, how do I start a line at a certain angle  _________  insert a gap at a precise location for a precise length  ____________ then resume and terminate at some precise endpoint — all without specifying x and y coordinates in a line tag?

This in fact will be the topic of the next few posts, which will focus on implementing Template A in JS then move on to the Ben Yusuf madrasa pattern [BR1, p. 71] that uses it as scaffolding.

I’m going to start off by further studying in some depth the humble SVG <line> element, and see where that gets me.