Code your math picture

edit commands


the resulting picture

Download the (static) SVG file of your created picture by clicking next button:

Or, copy-paste next code into a plain text editor and save it as my_picture.svg. Set the encoding to UTF-8, before saving.

The SVG file can be opened in any modern web browser and can be included in your (HTML) documents.

Instructions

Important: If you leave this page before saving your work, it may disappear.

You can edit your commands in the "edit commands" text input field, followed by clicking the "update picture" button to see the resulting picture. You can use the "open" and "save commands" buttons to open and download commands in a plain text .txt file.

You can also work from a plain text editor, such as MS Notepad, and save your work in this text editor. Your commands can be copied (Ctrl-a → Ctrl-c) and pasted (Ctrl-v) from the text editor into the "edit commands" text input field on this page, followed by clicking the "update picture" button.

The picture itself can be saved after clicking the button "get the SVG file of your picture".

Commands

Examples

initPicture(-4,4); axes(5, 1, true); grid()
pointsize = dotmarkersize = "4"
pointfill = dotmarkerfill = "purple"
point([0,0], "|", "0", "left")

var f = function(x) { return sin(x) };
var g = function(x) { return 1/f(x) };

strokewidth = "3"
stroke = "tomato"
plot(f,-5,5);
stroke = "purple"
plot(g,-5,-pi-0.05);
plot(g,-pi+0.05,0);
plot(g,0,pi-0.05);
plot(g,pi+0.05,5);
strokewidth = "2"
line([-pi,-5],[-pi,5])
line([pi,-5],[pi,5])

strokewidth = "2"
stroke = "green"
point([pi,0], "open", "π", "belowleft")

var xp = pi/2 
line([xp,0],[xp,f(xp)])
line([xp,f(xp)], [0,f(xp)],"dotarrow")

strokewidth = "1"
point([0,f(xp)], "open")
point([xp,0], "open", "π/2 ≈ "+round(xp,3))
function plot
 
initPicture(-4,4); axes(5, 1, true); grid()
var p
var f = function(x) { return x^3-p*x };
strokewidth = "3"
stroke = "rgb(200,0,200)"
for (p=0;p<4;p++) { 
 stroke = "rgb("+p*60+","+p*20+","+p*40+")"
 plot(f,-5,5);
}
function plot
 
initPicture(-pi-0.5,2*pi+0.5); 
axes(10, 1, true); 
gridstroke="lightgrey"; grid()
var f = function(x) { return sin(x) };
var g = function(x) { return cos(x) };
var h = function(x) { return tan(x) };
strokewidth = "2"

stroke = "red"
fontfill = "red"
plot(f,-pi-0.5,2*pi+0.5);
text([2.1,1],"sin(x)")

stroke = "blue"
fontfill = "blue"
plot(g,-pi-0.5,2*pi+0.5);
text([3.1,-1.1],"cos(x)")

stroke = "green"
fontfill = "green"
plot(h,-pi-0.5,-pi/2-0.05);
plot(h,-pi/2+0.05,pi/2-0.05);
plot(h,pi/2+0.05,3*pi/2-0.05);
plot(h,3*pi/2+0.05,2*pi+0.5);
text([3.5,2],"tan(x)")

strokewidth = "1"
fontfill = stroke = "black"
point([0,0], "|", "0", "below")
point([pi/2,0], "|", "π/2", "below")
line([pi/2,-5.5],[pi/2,5.5])
point([pi,0], "|", "π", "below")
point([3*pi/2,0], "|", "3π/2", "below")
line([3*pi/2,-5.5],[3*pi/2,5.5])
point([2*pi,0], "|", "2π", "below")
point([-pi/2,0], "|", "-π/2", "below")
line([-pi/2,-5.5],[-pi/2,5.5])
point([-pi,0], "|", "-π", "below")
function plot
 
// Parametric plot
initPicture(-5,5); axes(1, true); grid()
strokewidth = "3"
stroke = "red"
var x = function(t) { return 4*sin(3*t+1.57) };
var y = function(t) { return 4*sin(2*t) };
plot([x,y],-5,5);
Parametric function plot
 
// Polar plot
initPicture(-3,3); axes(1, true); grid()
strokewidth = "3"
stroke = "teal"
var r = function(t) { return 0.001*t^2 };
polarplot(r,0,16*pi,1000);
Polar function plot
 
// Polar plot 2
initPicture(-2.5,2.5); axes(1, true); grid()
strokewidth = "5"
stroke = "purple"
var r = function(t) { return 2*cos(4*t) };
polarplot(r,0,2*pi,1000);
Polar function plot
 
// Discrete graph
initPicture(-2,2)
dotmarkersize = "12"
strokewidth = "3"
var a = []
var n = 9
for (var i = 0; i < n; i++) {
 a[i] = [cos(pi/4*(-1)*i+pi/2),
 sin(pi/4*(-1)*i+pi/2)] }
path([a[0],a[3],a[6],a[1],a[4],a[7],a[2],a[5],
      a[0],a[4],a[5],a[1],a[2],a[6],a[7],a[3]])
path(a,"dotdotdot")
Discrete Graph
 
// Venn diagram
initPicture(-5.5,5.5)
fillopacity="0.7"
fill="red"
ellipse([-2,0],3,2)
fill="blue"
ellipse([2,0],3,2)
textanchor = "middle"
fontsize = "32"
text([-2,0],"A")
text([2,0],"B")
line([0,0],[0,-2.5],"arrow")
text([0,-3],"A ∩ B")
Venn diagram
 
initPicture(-5,5);gridstroke="lightgrey";grid()
pointsize = "4"
pointfill = "black"
fontsize="24"
point([0,0],"closed","O","below")
var r=3
strokewidth="3"
circle([0,0],r)
var B=[r*cos(degtorad(60)),r*sin(degtorad(60))]
triangle([-r,0],[r,0],B)
line([0,0],B)
strokewidth="1"
sector([-r,0],0.8,0,30)
sector([r,0],0.6,120,60)
sector(B,0.6,-120,60)
sector(B,0.6,-150,30)
pointsize = "0"
point([-r,0],"closed","A","left")
point([r,0],"closed","C","right")
point(B,"closed","B","aboveright")
text([-r+0.85,0.3],"α")
text([r-0.85,0.4],"β")
text([0.8,2.05],"α")
text([1.4,1.75],"β")
Math figure
 
initPicture(-5,5)
gridstroke = "lightgrey"
grid()
var w=8; var h=6
strokewidth="2"
rect([-w/2,-h/2],[w/2,h/2])
stroke="grey"
perpendsize = "14"
perpend([-w/2,h/2],-90)
perpend([w/2,-h/2],90)
point([0.25-w/2,0.5-h/2],"open")
point([-0.25+w/2,-0.5+h/2],"open")
pointfill = "grey"
point([0.7-w/2,0.2-h/2],"closed")
point([-0.7+w/2,-0.2+h/2],"closed")
strokedasharray = "10"
stroke ="red"
line([-w/2,-h/2],[w/2,h/2])
fontsize="32"
text([(-w/2)-0.5,0],"a")
text([0,(h/2)+0.5],"b")
text([0,0],"h")
text([0,-1.5],"h = ?")
Math figure
 
// Bar chart
initPicture(-1,13,-2,9.5)
gridstroke="rgb(200,200,200)"
grid();axes()
stroke="none"
fillopacity="0.5"

textanchor="middle"
var jan2013 = 20
var dec2013 = 31
fill="rgb(255,0,0)"
rect([0.5,0],[1.5,jan2013/10])
fill="rgb(255,100,100)"
rect([1.5,0],[2.5,dec2013/10])
text([1,0.2+jan2013/10], jan2013+"%")
text([2,0.2+dec2013/10], dec2013+"%")
textanchor="start"
text([1,-0.2],"jan 2013",-90)
text([2,-0.2],"dec 2013",-90)

textanchor="middle"
var jan2014 = 48
var dec2014 = 54
fill="rgb(0,255,0)"
rect([3.5,0],[4.5,jan2014/10])
fill="rgb(100,255,100)"
rect([4.5,0],[5.5,dec2014/10])
text([4,0.2+jan2014/10], jan2014+"%")
text([5,0.2+dec2014/10], dec2014+"%")
textanchor="start"
text([4,-0.2],"jan 2014",-90)
text([5,-0.2],"dec 2014",-90)

textanchor="middle"
var jan2015 = 79
var dec2015 = 71
fill="rgb(0,0,255)"
rect([6.5,0],[7.5,jan2015/10])
fill="rgb(100,100,255)"
rect([7.5,0],[8.5,dec2015/10])
text([7,0.2+jan2015/10], jan2015+"%")
text([8,0.2+dec2015/10], dec2015+"%")
textanchor="start"
text([7,-0.2],"jan 2015",-90)
text([8,-0.2],"dec 2015",-90)

textanchor="middle"
var jan2016 = 66
var dec2016 = 64
fill="rgb(200,0,200)"
rect([9.5,0],[10.5,jan2016/10])
fill="rgb(200,100,200)"
rect([10.5,0],[11.5,dec2016/10])
text([10,0.2+jan2016/10], jan2016+"%")
text([11,0.2+dec2016/10], dec2016+"%")
textanchor="start"
text([10,-0.2],"jan 2016",-90)
text([11,-0.2],"dec 2016",-90)
Bar chart
 
// Pie chart
initPicture(-5,5)
var r = 4
strokewidth = "2"
stroke = "Ivory"
fontsize = "32"
fontfill = "white"
fill = "red"
sector([0,0], r, 0, 45)
text([2,1],"12.5%")
fill = "green"
sector([0,0], r, 45, 90)
text([-0.5,2],"25%")
fill = "blue"
sector([0,0], r, 135, 135)
text([-2.5,-1],"37.5%")
fill = "purple"
sector([0,0], r, 270, 90)
text([1,-2],"25%")
Pie Chart
 
// Animation
var r = 1
var fun = function(x) { 
 point([0.1*x*cos(x),0.1*x*sin(x)])
}
animate(50,0.1,fun,60)
Animation

Licence and acknowledgements

This page's code is freely available under the GNU General Public License. All code that this page uses is in the source code of this very document. You can save your own copy of this page (using "Save As..."), and use this SVG editor locally and modify it or add your own functions as you like.

The code in this application is partly derived from the ASCIIMathML library by professor Peter Jipsen at Chapman University, released under GNU LGPL.