⚙ Testing Instance  |  Last Updated: 2026-07-14  |  Commit: e8b0646d4  |  Upstream (Lippman)

ASCIIsvg Reference

ASCIIsvg is a programatic drawing language, allowing you to create randomized basic drawings and illustrations.

When using the showasciisvg macro when writing a question the format is

$pic = showasciisvg(asciisvgcode,[width,height,alttext])

Here asciisvgcode is a string, enclosed in quotes, using the following commands, separated with semicolons.  Beware that since this string is enclosed in quotes, any quotes needed in the string either need to be 'single quotes' or escaped using backlashes like \"this\"

Examples
$pic = showasciisvg("setBorder(20);initPicture(-5,5,0,30); axes(1,5,1); plot('x^2'); marker='arrow'; line([1,1],[4,4]);")

Additional examples can be found in the "Examples" question library.

Command Reference

optional parameters are shown in {curly brackets}. These can be left out if not needed.

setBorder(border) or setBorder(left,bottom,right,top):  Sets the border, in pixels, around the main drawing window.  Text can spill into the border, which is why one is often used.  This should be used before calling initPicture.

Examples
// set a larger left and bottom border
setBorder(30,30,5,5);initPicture(0,5,0,5);

initPicture(xmin,xmax,{ymin,ymax}):  Initializes the drawing window.

Examples
initPicture(-5,5,0,10); // -5 to 5 in x, 0 to 10 in y
initPicture(-5,5); // -5 to 5 in both x and y

axes(xtick,ytick,{labels,xgrid,ygrid,dox,doy}):  Draws axes.  xtick and ytick are numbers giving the spacing of tick marks and labels on the x and y axes respectively.  Set labels to 0 to turn off axes labels, 1 to turn them on.  xgrid and ygrid can set the spacing of x and y grid lines; set to 0 to turn off.  dox and doy can be set to 0 to turn off tick marks and labels for the corresponding axis.

Examples
axes(1,1,1,1,1); // your standard axes with grids and labels by 1 
axes(1,2); // basic axes with ticks spaced at 1 in x 2 in y, no grid or labels.
axes(1,2,1); // axes with labels at 1 in x 2 in y, no grid
axes(1,2,1,2,4); // as above, but with grid at 2 in x 4 in y
axes(1,1,1,1,1,1,0); // doy off, no y axis or vertical labels/grid
axes(0,1,1); // xtick 0 will show no tick marks or labels on x-axis bu

plot("f(x)",{xmin,xmax,steps}):  Plot function f(x).   Can specify limited domain and number of steps if desired.

Examples
plot('x^2'); // plots x^2
plot('x',0,2); // plots y=x from x=0 to 2

plot(["x(t)","y(t)"],{tmin,tmax,steps}):  Plot parametric curve

Examples
plot(['sin(t)','cos(t)'],0,2*pi); // parametric circle

slopefield("dy/dx",{xstep,ystep}):  Plot a slopefield/direction field.  xstep and ystep are spacing of slopes.

Examples
slopefield('x',1,2); // dy/dx=x, spaced 1 in x 2 in y

line([x1,y1],[x2,y2]):  draw line from point [x1,y1] to [x2,y2]

Examples
line([1,1],[2,3]); // line from (1,1) to (2,3)

path([[x1,y1],...,[xn,yn]]):  draws line segments connecting the list of points

Examples
path([[1,1],[2,3],[3,0],[4,0]]); // connect the dots

circle([x1,y1],rad):  draws a circle centered at [x1,y1] with radius rad

Examples
circle([1,1], 4);

ellipse([x1,y1],xrad,yrad):  draws an ellipse with given center and radius in the x and y directions

Examples
ellipse([1,1], 3, 2);

arc([x1,y1],[x2,y2],rad):  draws a circular arc counter-clockwise from [x1,y1] to [x2,y2] with radius rad

Examples
arc([1,1],[2,3]);
arc([2,3],[1,1]); // arc curves other way 

sector([x,y],radius,angle_start,angle_end): Draws a sector with center of circle at x,y

Examples
sector([1,1],5,0,pi/4); 

rect([x1,y1],[x2,y2]):  draws a rectangle with given diagonally opposite corner points

Examples
rect([1,1],[3,7]); 

dot([x1,y1],{type,label,pos}):   draws a dot at the given point.  type can be used to set the type: open or closed (default).  Optionally, a label for the dot can be provided, and the position for that label can be specified (default below).

Examples
dot([1,1]); // basic closed dot 
dot([1,1],'open'); // open dot
dot([1,1],'closed','A'); // closed dot label A below 
dot([1,1],'closed','A','aboveright'); // label aboveright

text([x1,y1],"string",{pos,angle}):   draws the basic text string at given point.  No html or typeset math.  By default, center of text is placed at given point;  pos can be used to change. pos should be a string like left,right,above,below,aboveleft,etc.  angle, in degrees, can be used to rotate the text.

Examples
text([1,1],'A'); // A centered at 1,1
text([1,1],'A','left'); // A positioned left of 1,1
text([1,1],'A','',90); // A rotated 90deg, centered at 1,1
text([1,1],'`x^2`'); // a math label

textabs([pixelx,pixely],"string",{pos,angle}):  same as text function, but coordinates are pixel locations rather than coordinate system locations.

Examples
// for this, assume we set the width and height to 300
// if want a label along the left edge of the window
// rotated sideways
textabs([0,150],'Side Label','right',90);

Settings

stroke = "color":  sets line color:  white, black, gray, red, orange, yellow, green, blue, cyan, purple

Examples
stroke='blue'; line([1,1],[2,2]); // line will be in blue

fill = "color":  sets the fill for rectangles, circles, etc.  Same colors as above plus transred, transblue, transgreen for translucent colors.

Examples
fill='blue'; stroke='red'; rect([1,1],[2,2]); // rectangle will have red outline, blue fill
// could use stroke='none'; for no outline

fontfill = "color" :  sets the text color

Examples
fontfill='blue'; text([1,1],'A'); // text will be blue

fontbackground = "color" : background color for text

Examples
fontbackground='white'; text([1,1],'A'); // text will have a white background 
// handy when the text may be on top of a line or something

strokewidth=width:  sets line thickness

Examples
strokewidth=3; path([[1,2],[3,4],[5,6]]); // thicker path

strokedasharray="array":  dash array, ie "5 3" for 5 pixels color, 3 pixels white

Examples
strokedasharray="5 5"; plot('x^2'); // a dashed parabola

marker = "marker" :  turns on marks for the end of line segments.  marker: "dot", "arrow", "arrowdot" or "none"

Examples
marker='dot'; path([[1,2],[3,4],[5,6]]); // a dot at each point on the path
marker='arrow'; line([1,1],[2,2]); // line with arrow at 2,2