Javascript/SVG Live: Experiment with SVG Vector Graphics

// Enter javascript code here to draw:

var N=200
var j,r,g,b,x,y
var WIDTH=100
var HEIGHT=100

for(j=1;j<=N;j++) {
  r=Math.random()*255
  g=Math.random()*255
  b=Math.random()*255
  x=Math.random()*WIDTH
  y=Math.random()*HEIGHT
  circle(x,y,10, "rgba("+r+","+g+","+b+",0.5)")
}

Note: Code is executed live while you type... as long as the code is invalid, some or all of the graphics may disappear.
Note: You have to declare variables before use, like "var A,B" or "var C=5;"

⛔️ Warning: Do not execute code provided by someone else unless you understand that it doesn't do anything malicious. This directly executes javascript, without any safety precautions.

Pre-defined:

canvas 
...reference to the SVG drawing area (to which all other functions draw)

circle(x,y,radius,color)
...draw a circle. Returns the circle svg object for reference (same is true for all the other graphics functions below).

add(graphics_type,...attributes...)
...add an svg object of 'graphics_type', with a list of attributes. Example: add("circle","cx",10,"cy",20,"r","10")

rubberbox(x,y,string,rectcolor,textcolor,textstyle)
...draw a rounded box with text inside, stretching to fit (returns group object).

Code 2020 by Florian Marquardt
*/