some thoughts about whats become my favorite way to prototype generative svgs for onchain deployment

first, in most cases, ignore solidity. solidity comes with constrains that are detrimental to the speed of rapid prototyping. i prototype in js.

don't use react, static site generators or svg libraries like svg.js. you'll have to learn those and again that will slow things down.

so what should you do?

1) ask gpt for an html file template. you'll have many such templates as you try ideas (most will be bad) and explore.

2) almost without exception, programatic elements can be written as functions which return template strings.

2.5) for example:

3) have a plan for how to source randomness with solidity. i like generating a seed and passing it throughout the code. the benefit of this method is determinism.

4) get really familiar with svg, how the paint model works, how groups work and obviously the basic attributes of each tag.

5) going back to 2.5.... the /*svg*/ in front of the template string may be a small detail but it makes this way of doing things tolerable. in vscode, i use the `es6-string-html` extension.

6) it helps a lot to start drawing in figma before writing any code to test visual ideas. many times i have used the document structure exported from figma to kickstart in-code prototyping.

7) lastly, don't worry about making a mess. mess is just the evidence that you've done a ton of work and explored every path you could think of.