Gavin pfp
Gavin
@gavin
some thoughts about whats become my favorite way to prototype generative svgs for onchain deployment
1 reply
0 recast
3 reactions

Gavin pfp
Gavin
@gavin
first, in most cases, ignore solidity. solidity comes with constrains that are detrimental to the speed of rapid prototyping. i prototype in js.
1 reply
0 recast
1 reaction

Gavin pfp
Gavin
@gavin
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.
1 reply
0 recast
1 reaction

Gavin pfp
Gavin
@gavin
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:
1 reply
0 recast
0 reaction

Gavin pfp
Gavin
@gavin
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.
1 reply
0 recast
0 reaction

Gavin pfp
Gavin
@gavin
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.
1 reply
0 recast
0 reaction

Gavin pfp
Gavin
@gavin
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.
1 reply
0 recast
0 reaction

Gavin pfp
Gavin
@gavin
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.
0 reply
0 recast
1 reaction