In the previous SVG patterns article, I demonstrated how to build an illustration recursively, using a single element. This next version is more complex, demonstrating how to build patterns from nested, referencedgroups.
The entire pattern is built from a singlepolygon:
Note the the #base_levelelements are true recursions: each element uses the previous version, and uses the same transformand translatevalues to create smaller copies.
Creating the full design means referencing what has been built up so far as a single group, still working inside the <pattern>. First, we create multiple copies of the pattern, rotated from the top and bottom points of the original shape:
You can also find the complete pattern and code on CodePen.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystoreyto learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/pEWdmG