Created on bootloader: using the svg-js:0.0.1 runtime on Tezos, each work in these six projects lives inside an autonomous, self-contained <svg> file stored completely on-chain alongside its deterministic seed and PRNG.
Together they span 321 minted editions across minimalist geometry, recursive subdivision, iso-contour fields, and native SMIL SVG animation. Click any work below to execute its on-chain SVG code live in the viewer, or jump directly to any sub-project:
Sixteen alternating black and white squares stepped orthogonally across a 512×512 canvas. At each iteration the square shrinks by 16 units while its top-left origin shifts at random along x and y, compressing the remaining geometry toward one corner.
((BTLDR)=>{S=BTLDR.svg,D=16,L=D*D,x=y=L/2;S.setAttribute('viewBox',[0,0,2*L,2*L]);S.style.background=w='#fff';while(L){S.innerHTML+=`<rect x="${x}" y="${y}" width="${L}" height="${L}" stroke="#000" fill="${L/D%2?w:0}"/>`;r=BTLDR.rnd(L-=D)*4|0;x+=r%2*D;y+=(r>1)*D}})(BTLDR);
An animated SVG study where a sequence of random circles is linked by interpolated intermediate states using native SMIL <animate> tags. Each edition varies the hue corridor, saturation, step density, and maximum radius inside a rounded border.
((BTLDR)=>{let{rnd:R,svg:S}=BTLDR,U=(t,e=0)=>t+(e-t)*R(),L=(P,Q,u)=>P.map((p,i)=>p*(1-u)+Q[i]*u),W=400,m=30,N=U(20,m)|0,$=U(360),s=U(100),h=$-m-19*Math.cos($/57.3-2),j=130,H=(h,l)=>`hsl(${h},${s}%,${l}%)`,C=([x,y,r,l,h],c='')=>`<circle fill="${H(h,l)}" stroke="#000" cx="${x}" cy="${y}" r="${r}">${c}</circle>`,A=(a,u,v)=>`<animate attributeName="${a}" from="${u}" to="${v}" dur="1s" repeatCount="indefinite"/>`,P=(w=W-m,x=U(m,w),y=U(m,w))=>[x,y,Math.min(U(5,j),x-m,y-m,w-x,w-y),(1-R()*R())*100,h+U(m)],X=P(),Y,e='<rect x="20" y="20" width="360" height="360" fill="none" stroke="#000" rx="10"/>'+C(X);while(N--){Y=P();for(let K=U(10,31)|0,k=0;k<K;){let[a,b,r,g,i]=L(X,Y,k++/K),[s,t,q,h,$]=L(X,Y,k/K);e+=C(X,A('cx',a,s)+A('cy',b,t)+A('r',r,q)+A('fill',H(i,g),H($,h)))}X=Y;j-=3}e+=C(X);S.setAttribute('viewBox',[0,0,W,W]);S.setAttribute('style','background:#fff');S.innerHTML+=e})(BTLDR);
Multi-resolution marching-squares contour extraction over a seeded procedural scalar field. Successive octaves trace finer iso-lines at thinner stroke weights, evoking Benoit Mandelbrot’s coastline paradox inside a bold square frame.
((BTLDR)=>{let{rnd:R,svg:S}=BTLDR,U=(t,e=0)=>t+(e-t)*R(),x=U(1e9)|0,W=300,v=[.2,.5,.8],b=U(5,9)|0,w=[4,2,1],q=U(3,11),{sin:t,cos:e,PI:s,abs:r,hypot:l,floor:o,min:n}=Math,[$,i]=[U(.2,.8),U(.2,.8)],f=(e,s)=>4*((e,s,r=o(e),l=o(s),n=e-r,$=s-l,i=(e,s)=>(e=43758.5453123*t(127.1*e+311.7*s+101.39029*x),e-o(e)),f=n*n*(3-2*n),a=$*$*(3-2*$))=>i(r,l)*(1-f)*(1-a)+i(r+1,l)*f*(1-a)+i(r,l+1)*(1-f)*a+i(r+1,l+1)*f*a)(q*e,q*s)*l(e-$,s-i),a=(l,o,n,$,i)=>`M${l+n*e($)},${o+n*t($)}A${n},${n} 0 ${r(i-$)>s?1:0},${i>$?1:0} ${l+n*e(i)},${o+n*t(i)}`,d=(t,e,r,f,$,i,d=r/2,u="",c=(t,e,s,r)=>`M${t},${e}L${s},${r}`)=>(7==f||8==f?u+=a(t-d,e-d,d,0,s/2):11==f||4==f?u+=a(t+d,e-d,d,s/2,s):13==f||2==f?u+=a(t+d,e+d,d,s,1.5*s):14==f||1==f?u+=a(t-d,e+d,d,1.5*s,2*s):12==f||3==f?u+=c(t-d,e,t+d,e):9==f||6==f?u+=c(t,e-d,t,e+d):10==f?u+=$?a(t+d,e-d,d,s/2,s)+a(t-d,e+d,d,1.5*s,2*s):a(t-d,e-d,d,0,s/2)+a(t+d,e+d,d,s,1.5*s):5==f&&(u+=$?a(t-d,e-d,d,0,s/2)+a(t+d,e+d,d,s,1.5*s):a(t+d,e-d,d,s/2,s)+a(t-d,e+d,d,1.5*s,2*s)),u?`<path d="${u}" fill="none" stroke="#000" stroke-width="${i}" stroke-linecap="round"/>`:""),h="",g=W/2+100,u=W/2+100;for(let t=0;t<3;t++){let e=b<<t,s=W/e,l=w[t];for(let t of v)for(let o=0;o<e;o++)for(let n=0;n<e;n++){h+=d(g+(o+.5-e/2)*s,u+(n+.5-e/2)*s,s,parseInt([[o,n],[o+1,n],[o+1,n+1],[o,n+1]].map((([s,r])=>f(s/e,r/e)<t?0:1)).join``,2),f((o+.5)/e,(n+.5)/e)<t?0:1,l)}};S.setAttribute("viewBox","0 0 500 500"),S.setAttribute("style","background:#fff"),S.innerHTML+=`<rect x="100" y="100" width="300" height="300" stroke="#000" fill="none" stroke-width="8"/>${h}`})(BTLDR);
Recursive spatial subdivision into four quadrants where each cell renders as either a crisp square or a circle, accented sporadically with one of three dual-primary palettes against an uncolored grid.
((BTLDR)=>{let{rnd:R,svg:s}=BTLDR,U=(a,b=0)=>a+(b-a)*R(),B=p=>R()<p,S=(e,a,v)=>e.setAttribute(a,v),w=512,q=U(.1,.6),L=U(5,99),f=U(.8,1),c=['0ff,f00','f0f,0f0','ff0,00f'][U(3)|0].split`,`,e='',Z=(u,v,l)=>{e+=`<rect x="${u}" y="${v}" width="${l}" height="${l}" rx="${B(.5)?l/2:0}" stroke="#000" fill="${B(f)?'none':'#'+c[U(2)|0]}"/>`;if(B(q+l/w)&&l>L)for(let g=l/2,i=4;i--;)Z((0|i/2)*g+u,i%2*g+v,g)};S(s,'viewBox',[0,0,w,w]);S(s,'style','background:#fff');Z(32,32,448);s.innerHTML+=e})(BTLDR);
A minimalist one-liner emitting a single self-intersecting polygon of 10 to 40 vertices rendered with the SVG even-odd fill rule, carving alternating black voids and sharp negative shapes out of crossed edges.
((BTLDR)=>{let{rnd:R,svg:s}=BTLDR;s.setAttribute('viewBox','0 0 1 1');s.innerHTML+=`<rect width="1" height="1" fill="#fff"/><polygon fill-rule="evenodd" points="${[...Array(2*(10+30*R()|0))].map(R)}"/>`})(BTLDR);
Between 10 and 50 random black line segments distributed across a square viewport with quadratically weighted stroke widths, producing stark compositions balanced between hairline cuts and heavy bars.
((BTLDR)=>{BTLDR.svg.setAttribute('viewBox', '0 0 400 400');
const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
bg.setAttribute('x', 0);
bg.setAttribute('y', 0);
bg.setAttribute('width', 400);
bg.setAttribute('height', 400);
bg.setAttribute('fill', 'white');
BTLDR.svg.appendChild(bg);
const Nlines = 10 + BTLDR.rnd() * 40;
for (let i = 0; i < Nlines; i++) {
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', BTLDR.rnd() * 400);
line.setAttribute('x2', BTLDR.rnd() * 400);
line.setAttribute('y1', BTLDR.rnd() * 400);
line.setAttribute('y2', BTLDR.rnd() * 400);
line.setAttribute('stroke', 'black')
line.setAttribute('stroke-width', 1 + BTLDR.rnd() * BTLDR.rnd() * 19)
BTLDR.svg.appendChild(line);
}})(BTLDR);
