SVG Grid

Symbol library

We've added new type of generative SVG component to quickly create grid based vector graphics. The base concept is simple. Set the odds for the appearance of any symbol across a configurable 2D grid. Apply noise to scale or rotation parameters of each symbol to create rich visual textures. Adjust height, width, and cell size of the grid.

Symbols can be static or generative and combined in an endless amount of ways. We've started off with a set of common geometric forms.

Dense circuit grid

Minimal geometric composition

Applying noise to size attribute of symbols

Graphics can be used for print or the web. As the output is in SVG format you can use it for Giclée prints or pen plotting.

Giclée prints and pen plots

We're still in rapid development and have plans to add lots of new symbols and add more computational methods to distribute symbols. We can't wait to see what you generate.

Try it out here

Have a feature request? Drop into our Discord or open an issue on GitHub.

Roadmap

• One click copy to clipboard code export
• Gap between grid cells
• Hatch based fill options
• Support for custom symbols
• Larger symbol library
• More modification functions
• More parameters for adjusting noise
• Animating shapes
• Consolidated UI
• Color controls / constrain to theme
• Toggle symbol stacking
• A-symmetrical grid options

Reference

• SVG
• SVG Path - d attribute