Skip to main content
Code Golf

Return to Answer

added 100 characters in body
Source Link
Neil
Neil
  • 177.2k
  • 12
  • 74
  • 281

JavaScript (ES6) + SVG(HTML5), 53 + 523 51 + 519519 507 = 576 570570 558 bytes

document.write`<svg width=345 height=345>`;i=b=Math.PI/10;s=Math.sin(a=-b/2);c=Math.cos(a);f=(r,f,n)=>document.write(`<path d=M172,172L${[172+r*s,172+r*c]}A${[r,r,0,0,1,172+r*t,172+r*d]}z fill=#${f} n=${n} />`);g=(q,r,m,n,i)=>f(q,i?487545474:`be3628``b32`,n*m)+f(r,i?`fff`:`000`,n);[3,17,2,15,10,6,13,4,18,1,20,5,12,9,14,11,8,16,7,19].map(n=>{t=s;d=c;s=Math.sin(a+=b);c=Math.cos(a);g(170,162,2,n,i=!i);g(107,99,3,n,i);});document.write`<circle cx=172 cy=172 r=16 fill=#487545fill=#474 n=25 /><circle cx=172 cy=172 r=6 fill=#be3628fill=#b32 n=50`
<body onclick=alert(+event.target.getAttribute`n`)>

Input is via mouse click, output via alert. Edit: Saved 12 bytes by using slightly more approximate colours as suggested by @Arnauld.

JavaScript (ES6) + SVG(HTML5), 53 + 523 51 + 519 = 576 570 bytes

document.write`<svg width=345 height=345>`;i=b=Math.PI/10;s=Math.sin(a=-b/2);c=Math.cos(a);f=(r,f,n)=>document.write(`<path d=M172,172L${[172+r*s,172+r*c]}A${[r,r,0,0,1,172+r*t,172+r*d]}z fill=#${f} n=${n} />`);g=(q,r,m,n,i)=>f(q,i?487545:`be3628`,n*m)+f(r,i?`fff`:`000`,n);[3,17,2,15,10,6,13,4,18,1,20,5,12,9,14,11,8,16,7,19].map(n=>{t=s;d=c;s=Math.sin(a+=b);c=Math.cos(a);g(170,162,2,n,i=!i);g(107,99,3,n,i);});document.write`<circle cx=172 cy=172 r=16 fill=#487545 n=25 /><circle cx=172 cy=172 r=6 fill=#be3628 n=50`
<body onclick=alert(+event.target.getAttribute`n`)>

Input is via mouse click, output via alert.

JavaScript (ES6) + SVG(HTML5), 53 + 523 51 + 519 507 = 576 570 558 bytes

document.write`<svg width=345 height=345>`;i=b=Math.PI/10;s=Math.sin(a=-b/2);c=Math.cos(a);f=(r,f,n)=>document.write(`<path d=M172,172L${[172+r*s,172+r*c]}A${[r,r,0,0,1,172+r*t,172+r*d]}z fill=#${f} n=${n} />`);g=(q,r,m,n,i)=>f(q,i?474:`b32`,n*m)+f(r,i?`fff`:`000`,n);[3,17,2,15,10,6,13,4,18,1,20,5,12,9,14,11,8,16,7,19].map(n=>{t=s;d=c;s=Math.sin(a+=b);c=Math.cos(a);g(170,162,2,n,i=!i);g(107,99,3,n,i);});document.write`<circle cx=172 cy=172 r=16 fill=#474 n=25 /><circle cx=172 cy=172 r=6 fill=#b32 n=50`
<body onclick=alert(+event.target.getAttribute`n`)>

Input is via mouse click, output via alert. Edit: Saved 12 bytes by using slightly more approximate colours as suggested by @Arnauld.

added 21 characters in body
Source Link
Neil
Neil
  • 177.2k
  • 12
  • 74
  • 281

JavaScript (ES6) + SVG(HTML5), 5353 + 523 51 + 523519 = 576576 570 bytes

document.write(`<svgwrite`<svg width=345 height=345>`);i=b=Mathheight=345>`;i=b=Math.PI/10;s=Math.sin(a=-b/2);c=Math.cos(a);f=(r,f,n)=>document.write(`<path d=M172,172L${[172+r*s,172+r*c]}A${[r,r,0,0,1,172+r*t,172+r*d]}z fill=#${f} n=${n} />`);g=(q,r,m,n,i)=>f(q,i?487545:`be3628`,n*m)+f(r,i?`fff`:`000`,n);[3,17,2,15,10,6,13,4,18,1,20,5,12,9,14,11,8,16,7,19].map(n=>{t=s;d=c;s=Math.sin(a+=b);c=Math.cos(a);g(170,162,2,n,i=!i);g(107,99,3,n,i);});document.write(`<circlewrite`<circle cx=172 cy=172 r=16 fill=#487545 n=25 /><circle cx=172 cy=172 r=6 fill=#be3628 n=50`)
<body onclick=alert(+event.target.getAttribute(`n`)getAttribute`n`)>

Input is via mouse click, output via alert.

JavaScript (ES6) + SVG(HTML5), 53 + 523 = 576 bytes

document.write(`<svg width=345 height=345>`);i=b=Math.PI/10;s=Math.sin(a=-b/2);c=Math.cos(a);f=(r,f,n)=>document.write(`<path d=M172,172L${[172+r*s,172+r*c]}A${[r,r,0,0,1,172+r*t,172+r*d]}z fill=#${f} n=${n} />`);g=(q,r,m,n,i)=>f(q,i?487545:`be3628`,n*m)+f(r,i?`fff`:`000`,n);[3,17,2,15,10,6,13,4,18,1,20,5,12,9,14,11,8,16,7,19].map(n=>{t=s;d=c;s=Math.sin(a+=b);c=Math.cos(a);g(170,162,2,n,i=!i);g(107,99,3,n,i);});document.write(`<circle cx=172 cy=172 r=16 fill=#487545 n=25 /><circle cx=172 cy=172 r=6 fill=#be3628 n=50`)
<body onclick=alert(+event.target.getAttribute(`n`))>

Input is via mouse click, output via alert.

JavaScript (ES6) + SVG(HTML5), 53 + 523 51 + 519 = 576 570 bytes

document.write`<svg width=345 height=345>`;i=b=Math.PI/10;s=Math.sin(a=-b/2);c=Math.cos(a);f=(r,f,n)=>document.write(`<path d=M172,172L${[172+r*s,172+r*c]}A${[r,r,0,0,1,172+r*t,172+r*d]}z fill=#${f} n=${n} />`);g=(q,r,m,n,i)=>f(q,i?487545:`be3628`,n*m)+f(r,i?`fff`:`000`,n);[3,17,2,15,10,6,13,4,18,1,20,5,12,9,14,11,8,16,7,19].map(n=>{t=s;d=c;s=Math.sin(a+=b);c=Math.cos(a);g(170,162,2,n,i=!i);g(107,99,3,n,i);});document.write`<circle cx=172 cy=172 r=16 fill=#487545 n=25 /><circle cx=172 cy=172 r=6 fill=#be3628 n=50`
<body onclick=alert(+event.target.getAttribute`n`)>

Input is via mouse click, output via alert.

Source Link
Neil
Neil
  • 177.2k
  • 12
  • 74
  • 281

JavaScript (ES6) + SVG(HTML5), 53 + 523 = 576 bytes

document.write(`<svg width=345 height=345>`);i=b=Math.PI/10;s=Math.sin(a=-b/2);c=Math.cos(a);f=(r,f,n)=>document.write(`<path d=M172,172L${[172+r*s,172+r*c]}A${[r,r,0,0,1,172+r*t,172+r*d]}z fill=#${f} n=${n} />`);g=(q,r,m,n,i)=>f(q,i?487545:`be3628`,n*m)+f(r,i?`fff`:`000`,n);[3,17,2,15,10,6,13,4,18,1,20,5,12,9,14,11,8,16,7,19].map(n=>{t=s;d=c;s=Math.sin(a+=b);c=Math.cos(a);g(170,162,2,n,i=!i);g(107,99,3,n,i);});document.write(`<circle cx=172 cy=172 r=16 fill=#487545 n=25 /><circle cx=172 cy=172 r=6 fill=#be3628 n=50`)
<body onclick=alert(+event.target.getAttribute(`n`))>

Input is via mouse click, output via alert.