Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->
To get started with this blank [[TiddlyWiki]], you'll need to modify the following tiddlers:
* [[SiteTitle]] & [[SiteSubtitle]]: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* [[MainMenu]]: The menu (usually on the left)
* [[DefaultTiddlers]]: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>
<<importTiddlers>>
<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
These [[InterfaceOptions]] for customising [[TiddlyWiki]] are saved in your browser

Your username for signing your edits. Write it as a [[WikiWord]] (eg [[JoeBloggs]])

<<option txtUserName>>
<<option chkSaveBackups>> [[SaveBackups]]
<<option chkAutoSave>> [[AutoSave]]
<<option chkRegExpSearch>> [[RegExpSearch]]
<<option chkCaseSensitiveSearch>> [[CaseSensitiveSearch]]
<<option chkAnimate>> [[EnableAnimations]]

----
Also see [[AdvancedOptions]]
<!--{{{-->
<div class='header' role='banner' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' role='navigation' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' role='navigation' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' role='complementary' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea' role='main'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}

a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}

h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}

.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}

.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}

.tabSelected {color:[[ColorPalette::PrimaryDark]];
	background:[[ColorPalette::TertiaryPale]];
	border-left:1px solid [[ColorPalette::TertiaryLight]];
	border-top:1px solid [[ColorPalette::TertiaryLight]];
	border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}

.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
	border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
	border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
	border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}

.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}

#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}

.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}

.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}

.tiddler .defaultCommand {font-weight:bold;}

.shadow .title {color:[[ColorPalette::TertiaryDark]];}

.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}

.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}

.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}

.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}

.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}

.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}

.imageLink, #displayArea .imageLink {background:transparent;}

.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}

.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}

.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}

.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}

.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}

.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}
.readOnly {background:[[ColorPalette::TertiaryPale]];}

#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:alpha(opacity=60);}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em; left:0; top:0;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 0.3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0 0; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0;}
.wizardFooter .status {padding:0 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0 0 0.5em;}
.tab {margin:0 0 0 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0 0.25em; padding:0 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0 3px 0 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0; font-size:.9em;}
.editorFooter .button {padding-top:0; padding-bottom:0;}

.fieldsetFix {border:0; padding:0; margin:1px 0px;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0; right:0;}
#backstageButton a {padding:0.1em 0.4em; margin:0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin-left:3em; padding:1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none !important;}
#displayArea {margin: 1em 1em 0em;}
noscript {display:none;} /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
}
/*}}}*/
<!--{{{-->
<div class='toolbar' role='navigation' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
This plugin for [[TiddlyWiki|http://www.tiddlywiki.com]] >=2.5 is an adaptation of Peter Jipsen's [[ASCIIMathML|http://www1.chapman.edu/~jipsen/mathml/asciimath.html]] script that provides an easy way to:
#translate [[LaTeX|http://www.latex-project.org/]] math equations to [[MathML|http://www.w3.org/Math/]];
#produce mathematical [[SVG|http://www.w3.org/Graphics/SVG/]] graphics.
To find if this plugin may suit your needs please check the MainDifferences from ~ASCIIMathML. If you think that ~ASCIIMathML is what you need then try this other [[plugin|asciimathml.html]].
*MainFeatures
*[[Installation]]
*[[Configuration and Extension|MathSVGPluginComp]]
*SVGUserInteraction
*~AvailableFunctions for SVG drawing
*[[Examples]]
*[[The MathSVG code|MathSVGCode]]
*[[Tracker]]
*[[Credits]]
Click the picture to start animation
<div class='SVGgraph' options='height:300,scales:[-4.5,4.5,-4.5,4.5],coords:"polar"'>

function goforit(){
if(animate==true) timer = setInterval(roll,50);
else clearInterval(timer);
animate=!animate;
}

function roll(){
time+=0.05;
p.push([3*cos(time)-cos(3*time), 3*sin(time)-sin(3*time)]);
path(p,{stroke:"red",strokewidth:2,id:"neph"});
var cs= [3*cos(time),3*sin(time)];
line(p[p.length-1],cs,{stroke:"green",id:"axe",marker:{type:"*-*",stroke:"green"}});
circle(cs,1,{stroke:"black",id:"rev"});
if(time>2*PI) {p=[[2,0]]; time=0; animate=true; clearInterval(timer);}
}

var time=0;
var animate=true;
setAction("mousedown",goforit);
grid();
axes();
circle([0,0],2);
circle([0,0],3,{stroke:"grey"});
circle([3,0],1,{stroke:"black",id:"rev"});
line([2,0],[3,0],{stroke:"green",id:"axe",marker:"*-*",markerstroke:"green"});
var p=[[2,0]];
</div>
Click the button to start/stop animation
<div class='SVGgraph' options="height:300,scales:[-2,2,-1,3],border:'black 1px dotted'">
function goforit(){
SVG.locked = !SVG.locked;
if(animate==true){
timer = setInterval(roll,100);
} else {
clearInterval(timer);
}
animate=!animate;
return false;
}

function roll(){
time+=0.1;
var theta = PI/4*sin(sqrt(4.9)*time);
rotate("line",theta,{center:[0,2],replace:true});
}

var timer;
var time=0;
var animate=true;
rect([-1.5,2],[1.5,2.25],{fill:"red",stroke:"red"});

line([0,2],[0,0],{id:"line",marker:"--*",size:50,strokewidth:2,stroke:"yellow"});
button([SVG.xmax-0.75,SVG.ymin],[SVG.xmax,SVG.ymin+0.3],"start",goforit,{fill:"green",fillopacity:0.5,rx:0.05,ry:0.05,stroke:"yellow"});
</div>
1. If I try to close an arc, it doesn't seem to work at all when specifying the arc with start, end, and radius. If I specify a closed arc with center, startangle, endangle, and radius, the arc is closed but the closing path passes through the center co-ordinate. I wasn't expecting that.

2. If I specify an arc using center, startangle, endangle, and radius, then the start and end points are swapped.

Here is some example code to show these things.

Closed and filled arcs drawn using ''start'', ''end'', and ''radius''.
<div class='SVGgraph' options='height:200,scales:[-0.5,5.5,0.5,5.5]'>
setOptions({closed:true,fill:"orange"});
grid();
arc({start:[3,3],end:[4,4],radius:1,sweep:0,largearc:1});
arc({start:[2,1],end:[3,2],radius:1,sweep:0,largearc:0,closed:false,stroke:"red"});
arc({start:[0,1],end:[1,2],radius:1,sweep:1,largearc:0,stroke:"red",strokedasharray:"0.1,0.1"});
arc({start:[1,3],end:[2,4],radius:1,sweep:1,largearc:1,strokedasharray:"0.1,0.1"});
</div>
Closed and filled arcs drawn using ''center'', ''startangle'', ''endangle'', and ''radius''.
<div class='SVGgraph' options='height:200,scales:[-0.5,5.5,0.5,5.5]'>
setOptions({closed:true,fill:"orange"});
grid();
arc({center:[3,4],startangle:3*PI/2,endangle:2*PI,radius:1,sweep:0,largearc:1});
arc({center:[3,1],startangle:PI/2,endangle:PI,radius:1,sweep:1,largearc:0,closed:false,stroke:"red"});
arc({center:[1,1],startangle:PI/2,endangle:PI,radius:1,sweep:0,largearc:0,stroke:"red",strokedasharray:"0.1,0.1"});
arc({center:[1,4],startangle:3*PI/2,endangle:2*PI,radius:1,sweep:1,largearc:1,strokedasharray:"0.1,0.1"});
</div>
Closed and filled sectors drawn using ''center'', ''startangle'', ''endangle'', and ''radius'' (sectors are always closed).
<div class='SVGgraph' options='height:200,scales:[-0.5,5.5,0.5,5.5]'>
setOptions({fill:"orange"});
grid();
sector({center:[3,4],startangle:3*PI/2,endangle:2*PI,radius:1,sweep:0,largearc:1});
sector({center:[3,1],startangle:PI/2,endangle:PI,radius:1,sweep:1,largearc:0,stroke:"red"});
sector({center:[1,1],startangle:PI/2,endangle:PI,radius:1,sweep:0,largearc:0,stroke:"red",strokedasharray:"0.1,0.1"});
sector({center:[1,4],startangle:3*PI/2,endangle:2*PI,radius:1,sweep:1,largearc:1,strokedasharray:"0.1,0.1"});
</div>


Comparison of sweep settings when using ''center'', ''startangle'', ''endangle'' and ''radius'' (with a similar center point for each sweep setting).
<div class='SVGgraph' options='height:150,width:450,scales:[0.5,12.5,0.5,4.5]'>
grid();
var a=2; var b=2; var c=[a,b]; var d=0.25;
var n=PI/2; var e=0; var s=PI*1.5; var w=PI;
setOptions({stroke:"red",sweep:0,largearc:0,markerstroke:"red"});
arc({center:[a-d,b+d],startangle:n,endangle:w,radius:1,marker:"-*>"});
arc({center:[a-d,b-d],startangle:w,endangle:s,radius:1,marker:"-*>"});
arc({center:[a+d,b-d],startangle:s,endangle:e,radius:1,marker:"-*>"});
arc({center:[a+d,b+d],startangle:e,endangle:n,radius:1,marker:"-*>"});
text([a,3.8],"sweep:0");
text([a-1,b+1],"n-w");
text([a-1,b-1],"w-s");
text([a+1,b-1],"s-e");
text([a+1,b+1],"e-n");

var a=5; var b=2; var c=[a,b]; var d=0.25;
var n=PI/2; var e=0; var s=PI*1.5; var w=PI;
setOptions({stroke:"red",sweep:1,largearc:0,markerstroke:"red"});
arc({center:[a-d,b+d],startangle:n,endangle:w,radius:1,marker:"-*>"});
arc({center:[a-d,b-d],startangle:w,endangle:s,radius:1,marker:"-*>"});
arc({center:[a+d,b-d],startangle:s,endangle:e,radius:1,marker:"-*>"});
arc({center:[a+d,b+d],startangle:e,endangle:n,radius:1,marker:"-*>"});
text([a,3.8],"sweep:1");
text([a-1,b+1],"n-w",{pos:"se"});
text([a-1,b-1],"w-s",{pos:"ne"});
text([a+1,b-1],"s-e",{pos:"nw"});
text([a+1,b+1],"e-n",{pos:"sw"});

var a=8; var b=2; var c=[a,b]; var d=0.25;
setOptions({stroke:"blue",sweep:0,largearc:0,markerstroke:"blue"});
arc({center:[a-d,b+d],startangle:w,endangle:n,radius:1,marker:"-*>"});
arc({center:[a-d,b-d],startangle:s,endangle:w,radius:1,marker:"-*>"});
arc({center:[a+d,b-d],startangle:e,endangle:s,radius:1,marker:"-*>"});
arc({center:[a+d,b+d],startangle:n,endangle:e,radius:1,marker:"-*>"});
text([a,3.8],"sweep:0");
text([a-1,b+1],"w-n",{pos:"se"});
text([a-1,b-1],"s-w",{pos:"ne"});
text([a+1,b-1],"e-s",{pos:"nw"});
text([a+1,b+1],"n-e",{pos:"sw"});

var a=11; var b=2; var c=[a,b]; var d=0.25;
setOptions({stroke:"blue",sweep:1,largearc:0,markerstroke:"blue"});
arc({center:[a-d,b+d],startangle:w,endangle:n,radius:1,marker:"-*>"});
arc({center:[a-d,b-d],startangle:s,endangle:w,radius:1,marker:"-*>"});
arc({center:[a+d,b-d],startangle:e,endangle:s,radius:1,marker:"-*>"});
arc({center:[a+d,b+d],startangle:n,endangle:e,radius:1,marker:"-*>"});
text([a,3.8],"sweep:1");
text([a-1,b+1],"w-n");
text([a-1,b-1],"s-w");
text([a+1,b-1],"e-s");
text([a+1,b+1],"n-e");
</div>
Comparison of sweep settings when using ''start'', ''end'' and ''radius'' (with a common start point for each sweep setting).
<div class='SVGgraph' options='height:117,width:200,scales:[-0.5,5.5,0.5,4]'>
grid();
var a=1; var b=2; var st=[a,b];
setOptions({stroke:"red",sweep:0,largearc:0,markerstroke:"red"});
arc({start:st,end:[a-1,b+1],radius:1,marker:"-*>"});
arc({start:st,end:[a-1,b-1],radius:1,marker:"-*>"});
arc({start:st,end:[a+1,b-1],radius:1,marker:"-*>"});
arc({start:st,end:[a+1,b+1],radius:1,marker:"-*>"});
text([a,3.5],"sweep:0");
var a=4; var b=2; var st=[a,b];
setOptions({stroke:"red",sweep:1,largearc:0,markerstroke:"red",strokedasharray:"2,2"});
arc({start:st,end:[a-1,b+1],radius:1,marker:"-*>"});
arc({start:st,end:[a-1,b-1],radius:1,marker:"-*>"});
arc({start:st,end:[a+1,b-1],radius:1,marker:"-*>"});
arc({start:st,end:[a+1,b+1],radius:1,marker:"-*>"});
text([a,3.5],"sweep:1");
</div>
<div class='SVGgraph' options="scales:[-1.5,3.5,-.6,2], border:'red 5px solid'">
 axes();
 grid();
var a = [[0,0.5],[1,1],[2,1],[3,0.25]];
function f(x){
var i=0, s=a.length-2;
while(x>=a[i][0] && i<=s) i++;
  return (a[i][1]-a[i-1][1])/(a[i][0]-a[i-1][0])*(x-a[i-1][0])+a[i-1][1]-0.01;
}
path(a);
 area(f,"0.01",{min:0, max:3, stroke:"none",fill:"#ddd",points:100});
</div>

<div class='SVGgraph' options="scales:[-1.5,3.5,-.6,2], border:'red 5px solid'">
 axes();
 grid();
var a = [[0,0.5],[1,1],[2,1],[3,0.25]];
var b= [[a[0][0],0]];
b=b.concat(a,[[a[a.length-1][0],0]]);
polygon(b, {fill:"lightgray",stroke:"none"});
path(a);
</div>
!General functions
|!Function|!Argument|!Default value|!Unit|!Example|
|setPicture(options)||||
setScales(xmin,xmax,ymin,ymax)
setOptions(atr)
!Drawing functions

++++ grid(options)
|!Argument|!Default value|!Unit|
|dx| 1| IU|
|dy| dx or 3 for polar grid| IU|
|stroke| grey|
|strokewidth| 0.25| px|
|strokeopacity| 1| %/100|
|strokedasharray| none| px|
====
++++ axes(options)
|!Argument|!Default value|!Unit|
|origin| [0,0]| IU|
|dx| 1| IU|
|dy| dx| IU|
|ticklabels| true||
|marker| none||
|stroke| black||
|strokewidth| 0.5| px|
|strokeopacity| 1| %/100|
|strokedasharray| none| px|
====
++++ line(p,q,options)
|!Argument|!Default value|!Unit|
|''p''| | IU|
|''q''| | IU|
|>|>|stroke options|
|>|>|marker options|
|>|>|label options|
====
++++ path(plist,options)
|!Argument|!Default value|!Unit|
|''plist''| | IU|
|closed| false||
|curve| none||
|>|>|stroke options|
|>|>|fill options|
|>|>|marker options|
|>|>|label options|
====
++++ curve(plist,options)
|!Argument|!Default value|!Unit|
|''plist''| | IU|
|closed| false||
|>|>|stroke options|
|>|>|fill options|
|>|>|marker options|
|>|>|label options|
====
++++ vector(p,q,options)
|!Argument|!Default value|!Unit|
|''p''| | IU|
|''q''| | IU|
|>|>|stroke options|
|>|>|label options|
====
++++ circle(center,radius,options)
|!Argument|!Default value|!Unit|
|''center''| | IU|
|''radius''| | IU|
|>|>|stroke options|
|>|>|fill options|
====
++++ loop(p,options)
|!Argument|!Default value|!Unit|
|''p''| | IU|
|direction| [1,0]| IU|
|>|>|stroke options|
|>|>|fill options|
====
++++ arc(options)
|!Argument|!Default value|!Unit|
|''center''| | IU|
|''radius''| | IU|
|>|>|stroke options|
|>|>|fill options|
====
++++ ellipse(center,rx,ry,options)
|!Argument|!Default value|!Unit|
|''center''| | IU|
|''rx''| | IU|
|''ry''| | IU|
|>|>|stroke options|
|>|>|fill options|
====
++++ polygon(plist,options)
|!Argument|!Default value|!Unit|
|''plist''| | IU|
|curve| none||
|>|>|stroke options|
|>|>|fill options|
|>|>|marker options|
|>|>|label options|
====
++++ rect(p,q,options)
|!Argument|!Default value|!Unit|
|''p''| | IU|
|''q''| | IU|
|>|>|stroke options|
|>|>|fill options|
====
++++ text(p,st,options)
|!Argument|!Default value|!Unit|
|''p''| | IU|
|''st''| | IU|
|pos| E||
|fontsize| 12|?|
|fontstyle| normal|?|
|fontfamily| serif||
|fontweight| normal||
|>|>|stroke options|
|>|>|fill options|
====

image(url,options)
dot(p,options)

plot(fun,options)
area(fun1,fun2,options)
polarPlot(fun,options)
parametricPlot(fun1,fun2,options)
slopeField(fun,options)
!Transformations
rotate(id,angle,options)
translate(id,delta,options)
!Dynamic features
setAction(evt,fun)
getPosition(evt)
getAngle(evt,p)
getDistance(evt,p)
setText(st,id)
updatePicture()
$\mathbf{Bold} + xyz$
$abc + \mathbf{Bold} + xyz$

$\mathit{Italic} + xyz$
$abc+\mathit{Italic} + xyz$

$\mathbb{Blackboard} + xyz$
$abc+\mathbb{Blackboard} + xyz$
<div class='SVGgraph' options="scales:[-3*PI/2,2*PI],border:'5px solid black'">
 area(sin,cos,{min:-3*PI/4,max:5*PI/4,fill:"blue"});
</div>
Bold font: {{{\mathbf{} }}}

{{{$B+\mathbf{B}$}}}, $B+\mathbf{B}$

 

But, {{{\mathbf}}} __''does not work''__ if a superscript is added:

{{{{$B^T+\mathbf{B^T}$}}}, $B^T+\mathbf{B^T}$

Nor if a "hat", overline, tilde, or vec is added:

{{{$\hat{B}+\mathbf{\hat{B}}$}}}, $\hat{B}+\mathbf{\hat{B}}$

{{{$\overline{B}+\mathbf{\overline{B}}$}}}, $\overline{B}+\mathbf{\overline{B}}$

{{{$\tilde{B}+\mathbf{\tilde{B}}$}}}, $\tilde{B}+\mathbf{\tilde{B}}$

{{{$\vec{B}+\mathbf{\vec{B}}$}}}, $\vec{B}+\mathbf{\vec{B}}$

 

Nor does {{{\mathbf}}} work if a subscript is added (but the subscript itself is bold!!):

{{{$B_1+\mathbf{B_1}$}}}, $B_1+\mathbf{B_1}$

However, only numerals subscripts are made bold; subscript letters are not bold unless preceded by a numeral:

$\mathbf{B_1}+\mathbf{B_{123}}+\mathbf{B_{letters}}+\mathbf{B_1a}+\mathbf{B_1abc}+\mathbf{B_a1b2}$

 

Bold font ''__does__'' work if a simple accent is added:

{{{$B'+\mathbf{B'}$}}}, $B'+\mathbf{B'}$

{{{$B''+\mathbf{B''}$}}}, $B''+\mathbf{B''}$
<span class='SVGgraph' options="height:200,width:200,border: 'green 2px solid'">
text([0,0],'span text (0,0)',{fontfill:'green'});
text([0,2],'$span\\;maths\\;(0,2)$',{fontfill:'green'});
grid({stroke:'lightgreen'}); axes({ticklabels:false,strokeopacity:0.5}); </span>

<div class='SVGgraph' options="height:200,width:200,border:'blue 2px solid'">
text([0,0],'div text (0,0)',{fontfill:'blue'});
text([0,-2],'$div\\;maths\\;(0,-2)$',{fontfill:'blue'});
grid({stroke:'lightblue'}); axes({ticklabels:false,strokeopacity:0.5}); </div>
<div class='SVGgraph' options="width:540,height:340,scales:[-20,380,-10,100], border:'white solid 2px'">
axes({dx:30,dy:10,stroke:"yellow",marker:">",fontfill:"orange"});
var j, a = [];
for(j=0;j<181;j++){
 a.push([j*2,j/2]);
}
path(a,{stroke:"none",marker:"-o-",size:3,markerstroke:"none",markerfill:"#0f0",markerfillopacity:1});
 tracker([SVG.xmax,SVG.ymin],{coords:"cartesian",fontfill:"orange",fontsize:10,pos:"nw",fontfamily:"fixed"});
</div>
<div class='SVGgraph' style='float:right; background-color:#FFFF99;' options="border:'2px solid orange'"> axes({ticklabels:false}); plot("cos(x)/x",{steps:[0]}) </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras ut est eget metus dignissim blandit. Curabitur eget ante. Sed porttitor, libero commodo sodales tristique, mi orci adipiscing ante, at tincidunt mi arcu non quam. Sed ut ligula. Maecenas porttitor tellus nec justo. Suspendisse turpis risus, iaculis non, iaculis sed, vehicula sed, erat. Suspendisse mollis commodo est. In pulvinar. Vestibulum ante augue, tincidunt eget, vestibulum nec, gravida nec, nisi. Sed vitae diam in turpis tempor ornare. Proin vestibulum velit sit amet metus. Morbi pharetra sollicitudin metus. Nullam neque ante, porttitor fringilla, feugiat vel, pretium ac, quam. Morbi vestibulum turpis. Maecenas et urna. Suspendisse potenti. Donec condimentum vehicula tellus. Sed bibendum vestibulum tellus. Integer eget turpis nec dolor lacinia pretium.
There are several ways to change the font style of math expressions.
!1. Globally
!!a) Setting a plugin option on start
Change and uncomment the following three lines in MathSVGPluginComp. Save and reload the TW.
//{{{
MSVG.mathColor = "green"; //font color
MSVG.mathFontSize = ""; //font size
MSVG.mathFontFamily = ""; //font family
//}}}
!!b) Using CSS
Change and include the following code in your StyleSheet.
//{{{
mstyle{
 color: red;
 font-size: 150%;
 font-family: "Bitstream Vera Serif", "Times New Roman", serif
}
//}}}
!2. Locally
!!a) Affecting a single tiddler
Change and include the following code in your StyleSheet,
//{{{
#tiddlerMoreLaTeX mstyle{
 color: red;
 font-size: 150%;
}
//}}}
to change the style of all math expressions in the tiddler MoreLaTeX.
!!b) Affecting custom expressions
Change and include the following code in your StyleSheet,
//{{{
.myMath mstyle{
 font-family: "Bitstream Vera Sans";
 background: blue;
 color: yellow;
 font-size: 120%
}
//}}}
to change the style of all math expressions marked with the //myMath// custom CSS class, as in the tiddler  LaTeXExamples.
/***
|Name:|CloseOnCancelPlugin|
|Description:|Closes the tiddler if you click new tiddler then cancel. Default behaviour is to leave it open|
|Version:|3.0.1 ($Rev: 3861 $)|
|Date:|$Date: 2008-03-08 10:53:09 +1000 (Sat, 08 Mar 2008) $|
|Source:|http://mptw.tiddlyspot.com/#CloseOnCancelPlugin|
|Author:|Simon Baird <simon.baird@gmail.com>|
|License:|http://mptw.tiddlyspot.com/#TheBSDLicense|
***/
//{{{
merge(config.commands.cancelTiddler,{

	handler_mptw_orig_closeUnsaved: config.commands.cancelTiddler.handler,

	handler: function(event,src,title) {
		this.handler_mptw_orig_closeUnsaved(event,src,title);
		if (!store.tiddlerExists(title) && !store.isShadowTiddler(title))
			story.closeTiddler(title,true);
	 	return false;
	}

});

//}}}
Click to start simulation.
<div class='SVGgraph' options="height:600,width:200,scales:[-3.5,3.5,-101,10],pan:false, border:'orange solid 5px'">
function f(x){return 20*1/sqrt(2*PI)*exp(-0.5*pow(x,2));}

function goforit(e){
if(animate==1) {
  success=0;
  time=0;
  animate=0;
  openGroup('ics',true);
  timer = setInterval(roll,50);
}
}

function roll(){
time++;
if(time>limit) {animate=1; closeGroup(); clearInterval(timer); return;}
var sd=1./sqrt(20);
var mean=rnormal(0,sd);
var liminf=mean-1.96*sd;
var limsup=mean+1.96*sd;
var color="red";
if(liminf<0 && limsup>0){
success++;
color="green";
}
var covering=success/time;
line([liminf,-time],[limsup,-time],{stroke:color});
text([2.5,limit*0.05],covering.toFixed(2),{id:"success",fontfill:"green"});
}

var time, limit=100;
var success, animate=1;
plot(f);
setAction("mousedown",goforit);
grid({dx:0.5,dy:limit/20});
axes({dx:1,dy:200,size:0.5});
</div>
Full credit should go to [[Peter Jipsen|http://www1.chapman.edu/~jipsen/]] for his ~ASCIIMathML and ASCIISVG scripts and to [[Douglas Woodall|http://www.maths.nottingham.ac.uk/personal/drw/]] for his ~LaTeX version. I'm also grateful to several users of those scripts that provided suggestions and fixes that I shamelessly used in my code.

I am also thankful to Andrew ~McLachlan for his help testing the plugin and his many suggestions. 
<div class='SVGgraph'>
curve([[0,0],[1,1],[0,2],[3,1]],{marker:'oso',markerfill:"yellow"});
</div>
[[About]]
[[Warning]]
<div class='SVGgraph' options='width:600,height:135,scales:[-6.75,6.75,-1.5,1.5]'>
function update(evt) {
  var y = sin(x);
  line([x,0],[x,y],{id:"x1id",stroke:"red",strokewidth:3,label:"$\\theta$",pos:(y<0)?"n":"s"});
  line([-5+cos(x),y],[-5+cos(x),0],{id:"x2id",stroke:"red",strokewidth:3});
  path([[x,y],[-5+cos(x),y]],{id:"xdid",stroke:"red",strokewidth:1,strokedasharray:"10,10"});
  text([-5+.3*cos(x/2),.3*sin(x/2)],"$\\theta$",{id:"xaid"});
  path([[-5,0],[-5+cos(x),y]],{id:"rid",stroke:"green"});
  text([x+0.1,y/2],"$\\sin\\theta$",{pos:"e",id:"l1id"});
  text([-5+cos(x)-0.1,y/2],"$\\sin\\theta$",{pos:"w",id:"l2id"});
  if (x<0) arc({start:[-5+.4*cos(x),.4*sin(x)],end:[-5+.4,0],radius:.4,id:"aid",stroke:"green"});
  else if (x< PI) arc({start:[-5+.4,0],end:[-5+.4*cos(x),.4*sin(x)],radius:.4,id:"aid",stroke:"green"});
  else arc({start:[-5+.4,0],end:[-5+.4*cos(x),.4*sin(x)],radius:.4,id:"aid",largearc:1,stroke:"green"}); 
  var gx = SVG.mouse[0];
  if (gx>-PI && gx<=2*PI) x = gx;
};

grid();
axes({marker:">"});
setAction("mousemove",update);
plot("sin(x)",{min:-PI,max:2*PI});
var x= .5;
circle([-5,0],1);
text([PI,0],"$\\pi$",{pos:"n"});
text([2*PI,0],"$2\\pi$",{pos:"n"});
text([-PI,0],"$-\\pi$",{pos:"n"});
update();
</div>
$n = \frac{s^2 \left(t_{\alpha(2),\nu} + t_{\beta(1),\nu}\right)^2}{\delta^2}$
{{center{
Secant line of $\left\{\begin{array}{ll}
x^2, & \textrm{if} x < 1 \\
x^2+1, & \textrm{if} x \ge 1
\end{array}\right.$  at $a=1$
}}}
<div style='margin-right:auto;margin-left:auto' class='SVGgraph' options='width:250,height:250,scales:[-2.5,2.5,-0.7,3]'>
function sline(x){
  return m*x+c;
}

function click() {
  a=SVG.mouse[0];
  fa2 = f2(a);
  setOptions({stroke:"blue"});
  line([a,fa2],[a,0],{id:"apos",marker:"*-*",markerstroke:"blue",label:["P","a"],pos:["w","n"],strokedasharray: "10,10"});
  m = (f2(a+0.01)-fa2)/0.01;
  c = fa2-m*a;
  if (a!=1) plot(sline,{min:-2.5,max:2.5,id:"tangent",points:2,strokedasharray:"none", stroke:"red", strokewidth:2});
};

function update() {
  var fb2 = f2(b);
  setOptions({stroke: "green"});
  line([b,fb2],[b,0],{id:"xpos",marker:"*-*",markerstroke:"green",label:["Q","x"],pos:["e","n"],strokedasharray: "10,10"});
  if (abs(b-a)>0.000001) m = (fb2-fa2)/(b-a);
  else m = (f2(a+0.01)-fa2)/0.01;
  c = fa2-m*a;
  plot(sline,{min:-2.5,max:2.5,id:"secant",points:2,strokedasharray:"none", strokewidth:2});
  text([-2.5,-0.6],"slope = "+m.toFixed(2),{pos:"ne",id:"slope"});
  b = SVG.mouse[0];
};

axes();
setAction("mousemove",update);
setAction("click",click);
f2=function(x){return (x < 1?x*x:x*x+1)};
plot(f2,{steps:[1]});
dot([1,1],{marker:'o',markerfill:'white'});
dot([1,2],{marker:'*'});
var fa2, a = 1;
var m, c, b = 0.8;
click();
update();
</div>
$\frac{1}{2}$
$\frac12$
$\bfrac{1}{2}$
<div class='SVGgraph'>
grid();
axes();
plot("1/x",{steps:[0]});
plot("pow(1/x,2)",{steps:[0],stroke:"red"});
</div>
<div class='SVGgraph' options="height:200,width:320,scales:[-0.6,6,-1.2,8], border:'1px solid black'">
axes();
var a=[[1,3],[2,5],[3,6],[4,2],[5,7]];
var b=[3,5,6,2,7];
path(a,{marker:"ooo",markerfill:"yellow",stroke:"none",label:b,pos:"n"});
</div>
<div class='SVGgraph' options='width:400,height:300'>
grid();
setOptions({size:30,marker:"*",markerstroke:"orange",markerstrokeopacity:0.5});
dot([0,0],{label:"default"});
dot([2,2],{label:"NE",pos:"ne"});
dot([-2,2],{label:"NW",pos:"nw"});
dot([-2,-2],{label:"SW",pos:"sw"});
dot([2,-2],{label:"SE",pos:"se"});
dot([2,0],{label:"E",pos:"re"});
dot([-2,0],{label:"W",pos:"w"});
dot([0,2],{label:"N",pos:"n"});
dot([0,-2],{label:"S",pos:"s"});
</div>
<div class='SVGgraph' options='scales:[-6,6],coords:"polar"'>
function f(x){return a*cos(x);}

function g(x){return b*sin(x);}

function moveit() {
  var angle = getAngle();
  parametricPlot(f,g,{max:angle,id:"ell",stroke:"darkorange",strokewidth:4});
  path([[-c,0],[a*cos(angle),b*sin(angle)],[c,0]],{id:"gen",stroke:"blue",strokewidth:2,strokedasharray:"5,5"});
}

setAction("mousemove",moveit);
axes({ticklabels:false});
var a = 5;
var b = 3;
var c = sqrt(a*a-b*b);
dot([-c,0],{marker:{type:"*"},label:"$F_1$",pos:"S"});
dot([c,0],{marker:{type:"*"},label:"$F_2$",pos:"S"});
</div>
<div class='SVGgraph' style='float:right' options='width:250,height:250,scales:[-2.5,2.5]'>
function g(x){return -pow(x,3)+2*x;}

function f(x){return m1*x+c1;}

function update() {
  var fb1 = g(b1);
  setOptions({stroke:"green"});
  line([b1,fb1],[b1,0],{id:"xpos",marker:"*-*",markerstroke:"green",label:["Q","x"],pos:["e","n"],strokedasharray: "10,10"});
  if (abs(b1-a1)>0.000001) m1 = (fb1-fa1)/(b1-a1);
  else m1 = (g(a1+0.01)-fa1)/0.01;
  c1 = fa1-m1*a1;
  plot(f,{min:-2.5,max:2.5,id:"secant",strokewidth: 2,points:2});
  text([-2.5,-2.4],"slope = "+m1.toFixed(2),{id:"slope",pos:"NE"});
  b1 = SVG.mouse[0];
};

axes();
setAction("mousemove",update)
plot(g);
var a1 = 0.5;
var b1 = 0.8;
var fa1 = g(a1);
line([a1,fa1],[a1,0],{marker:"*-*",label:["P","a"],pos:["w","n"],strokedasharray: "10,10"});
var m1 = (g(a1+0.01)-fa1)/0.01;
var c1 = fa1-m1*a1;
plot(f,{min:-2.5,max:2.5,stroke:"red",points:2});
update();
</div>
Click and hold the left mouse button to start drawing a new path
<div class='SVGgraph' options="pan:false,border:'2px solid black'">
function update(e){
if(draw==1) {
  p[p.length] = SVG.mouse;
  path(p,{id:"drawing"+count});
}
}

function start(){
 draw=1;
 count++;
 p=[];
}

function reset(){
 draw=0;
}

setAction("mousedown",start);
setAction("mousemove",update);
setAction("mouseup",reset);
var p = [];
var draw = 0;
var count = 0;
</div>
$\begin{eqnarray}
\frac{d}{dt}(\vec v \cdot \vec v)&=&\frac{d}{dt}(c^2)\\
\vec v\cdot\frac{d\vec v}{dt}+\frac{d\vec v}{dt}\cdot \vec v &=& 0\\
2\vec v\cdot\frac{d\vec v}{dt}&=&0
\end{eqnarray}$
!SVG examples: <<tag svg>>
!SVG examples with dynamic features: <<tag dynamic>>
!Math notation examples: <<tag latex>>
This picture uses external javascript code that is loaded in MathSVGPluginComp.
<div class="SVGgraph" options='width:320,scales:[-1.5,1.5,-1.3,1.3],coords:"none"'>
axes();
var p0= [1,0.5];
text(cxmult([0.4,0],p0),"$A_1$");
var p1= [-0.45,-0.5 +1.7321 / 2];
var p2= [-0.55,-1.7321 / 2];
path([p0,p1,p2],{closed:true,marker:'---',label:["$A$","$B$","$C$"],pos:["ne","nw","sw"]});
text([0.75,-1.1], "Shift Click for SVG Tools");
</div>
The plugin is not loaded by TW.
Now it works with Opera 10.
<div style='margin-right:auto;margin-left:auto' class='SVGgraph' options='width:200,height:200,scales:[-1.1,1.1]'>
a = []
n = 9
 for (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,{marker:"oo",markerfill:"orange"})
</div>
<div class='SVGgraph' options='width:250,height:250,scales:[-10,10]'>
axes({dx:2});
polarPlot("x/PI",{min:0,max:10*PI,stroke:"red"});
</div>
<span class='SVGgraph' options='width:200,height:200,scales:[-2,2]'>
setOptions({stroke:'red'});
polarPlot("2*sin(5*x)",{min:0, max:PI})
</span><span class='SVGgraph' options='width:200,height:200,scales:[-2,2]'>
setOptions({stroke:'red'});
polarPlot("2*sin(3/5*x)",{min:0,max:5*PI})
</span><span class='SVGgraph' options='width:200,height:200,scales:[-2,2]'>
setOptions({stroke:'red'});
polarPlot("2*sin(PI*x)",{min:0,max:14*PI,points:1000})
</span>
<div class='SVGgraph' options='width:200,scales:[-2.5,2.5,-2.5,2.5]'>
grid();
polygon([[-1,1],[-1,-1],[1,-1],[1,1]],{stroke:"blue",strokewidth:1,
marker:"ooo",size:20,markerstroke:"orange",markerstrokewidth:0.5,markerfill:"green",markerfillopacity:0.3,markerstrokeopacity:0.3, fill:"fuchsia",fillopacity:0.5, label:["1","2","3","4"],pos:["nw","sw","se","ne"],
fontsize:36,fontweight:"bold",fontfill:"red",fontfillopacity:0.9,fontstroke:"brown",fontstrokewidth:2});
</div>
A famous result due to [[Euler|http://www-groups.dcs.st-and.ac.uk/~history/Mathematicians/Euler.html]] in ~LaTeX: $\sum_{n=1}^{+\infty}{\frac1{n^2}=\frac{\pi^2}6$
and again as a centered equation using {{{$$ ... $$}}}$$\sum_{n=1}^{+\infty} \frac{1}{n^2}=\frac{\pi^2}{6}.$$
or using {{{\[ ... \]}}} \[\sum_{n=1}^{+\infty} \frac{1}{n^2}=\frac{\pi^2}{6}.\]
Here is a graph of $x-\frac{x^3}{6}$ and $\sin(x)$

<div class='SVGgraph' options='width:300,height:150,scales:[-6.29,6.29]'>
grid({dx:1,stroke:"green"});
axes({marker:">"});
plot("sin(x)",{stroke:"red"})
plot("x-pow(x,3)/6",{min:-4,max:4,stroke:"blue", strokedasharray:"10,10"})
text([-2,-2.5],"Close friends near 0!",{id:"rot",fontsize:18,fontfill:"orange"});
rotate("rot",PI/18,{center:[-5,-3]});
</div>
and a diagram illustrating why Pythagoras' Theorem holds:

<div class='SVGgraph' options='width:400,height:150,scales:[-4,4,1,4]'>
setOptions({fill:"yellow"});
rect([1,1],[4,4])
rect([-4,1],[-1,4])
setOptions({fill:"red"});
rect([-2,1],[-1,2])
setOptions({fill:"blue"});
rect([-4,2],[-2,4])
setOptions({fill:"green"});
path([[1,2],[2,4],[4,3],[3,1],[1,2]])
setOptions({fill:"none"});
path([[-4,1],[-2,2],[-1,4]])
</div>
<div class='SVGgraph' options='width:300,scales:[-5,5,-5,5]'>
image('figuras/moon.jpg',{origin:[0,0]})
axes();
plot("cos(x)")
</div>
<div class='SVGgraph'>
axes();
plot("Gamma(x)");
</div>
<div class='SVGgraph' options='width:120,height:120,scales:[-0.5,1.5,-0.5,1.5]'>
var a=[0,1];
var b=[1,1];
var c=[1,0];
var d=[0,0];
path([b,d,a,c]);
path([a,b,c,d],{marker:"ooo",markerfill:"yellow",label:["a","b","c","d"],pos:["nw","ne","se","sw"]});
text([.5,-0.5],"$K_4$",{pos:"n"});
</div>
|!Marker text |!Marker|!Description|
| {{{s}}} | <span class='SVGgraph' options='height:20'>dot([0,0],{marker:"s",size:8});</span> | Open square (can be filled using {{{markerfill}}}) |
| {{{S}}} | <span class='SVGgraph' options='height:20'>dot([0,0],{marker:"S",size:8});</span> | Filled square (using {{{markerstroke}}} colour, {{{markerfill}}} is ignored) |
<div class='SVGgraph' options="scales:[-1.5,3.5,-.6,2], border:'red 5px solid'">
 axes();
 area("pow(x,2)","0.01",{min:0, max:1, stroke:"none",fill:"#ddd",points:50});
 setOptions({stroke:"blue"});
 plot("pow(x,2)");
 text([2,0.5],"$=\\int_0^1 x^2\\,dx=\\frac{1}{3}$");
</div>
<div style='margin-right:auto;margin-left:auto' class='SVGgraph' options='width:300,scales:[-5.1,5.1,-5.1,5.1]'>
  circle([0,0],5,{strokewidth:3, stroke:"none",fill:"#FFD500"})
  arc({start:[-2,-2],end:[2,-2],radius:3,  stroke:"red",strokewidth:5})
  circle([-2,1],.5,{stroke: "none", fill: "darkblue"})
  circle([2,1],.5,{stroke: "none", fill: "darkblue"})
  arc({start:[-1.5,1.5], end:[-2.5,1.5], radius:1, stroke: "fuchsia", fill: "none", strokewidth:3})
  arc({start:[2.5,1.5], end:[1.5,1.5], radius:1, stroke: "fuchsia", fill: "none", strokewidth:3})
</div>
<div style='background-color:#FFFF99' class='SVGgraph' options="width:300,scales:[-0.5,6,-0.5,5],border:'2px solid blue'">
axes();
image('http://www1.chapman.edu/~jipsen/mathml/asciimathml.jpeg',{origin:[1.7,2],width:60,height:75,pos:"NE"});
setOptions({stroke:"red"});
plot("2*(sin(2*x)+1)");
</div>
This picture uses external javascript code that is loaded in MathSVGPluginComp.
<div class="SVGgraph" options='width:320,height:200,scales:[-1.4,1.4,-1.4,1.4],coords:"none"'>
axes();

var p0 = [runif(-1,1,2),runif(-1,1,2)];
var p1 = [runif(-1,1,2),runif(-1,1,2)];
var p2 = [runif(-1,1,2),runif(-1,1,2)];
path([p0,p1,p2],{label:["$A$","$B$","$C$"],pos:"nw",closed:true});

var l0 = cxabs(cxsub(p1,p2));
var l1 = cxabs(cxsub(p0,p2));
var l2 = cxabs(cxsub(p1,p0));

var t0 = (l2*l0/(l1+l2))/cxabs(cxsub(p2,p1));
line(p0,cxprop(p2,p1,t0),{stroke:'red'});

var t1 = (l2*l1/(l0+l2))/cxabs(cxsub(p2,p0));
line(p1,cxprop(p2,p0,t1),{stroke:'red'});

var t2 = (l2*l0/(l1+l0))/cxabs(cxsub(p0,p1));
line(p2,cxprop(p0,p1,t2),{stroke:'red'});

text([0.7,-0.95], "Randomized Case")
text([0.7,-1.2], "Shift Click for SVG Tools")
</div>
example <span class='SVGgraph' options='width:50,height:30>
axes({ticklabels:false});
plot("sin(x)");
</span> of an inline picture
config.formatters.unshift( {
    name: "inlinesliders",
    match: "\\+\\+\\+\\+|\\<slider",
    lookaheadRegExp: /(?:\+\+\+\+|<slider) (.*?)(?:>?)\n((?:.|\n)*?)\n(?:====|<\/slider>)/mg,
    handler: function(w)
    {
        this.lookaheadRegExp.lastIndex = w.matchStart;
        var lookaheadMatch = this.lookaheadRegExp.exec(w.source)
        if(lookaheadMatch && lookaheadMatch.index == w.matchStart )
            {
            var btn = createTiddlyButton(w.output,lookaheadMatch[1] + " "+"\u00BB",lookaheadMatch[1],this.onClickSlider,"button sliderButton");
	        var panel = createTiddlyElement(w.output,"div",null,"sliderPanel");
	        panel.style.display = "none";
            wikify(lookaheadMatch[2],panel);
            w.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
            }
    },
    onClickSlider : function(e)
    {
        if(!e) var e = window.event;
	    var n = this.nextSibling;
        n.style.display = (n.style.display=="none") ? "block" : "none";
        return false;
    }
})
#Copy the MathSVGPlugin tiddler to your ~TiddlyWiki and tag it with //systemConfig//
#Optionally, copy and adapt the MathSVGPluginComp tiddler for additional configuration
<div class='SVGgraph' options='width:320,height:200,scales:[-0.5,4,-0.5,4.5]'>
axes({marker:">"});
plot("2*x-2",{min:0.9,max:3.1});
plot("-2*x+6",{min:0.9,max:3.1});
area("4+rnormal(0,0.04)","(-2*x+6)*step(2-x)+(2*x-2)*step(x-2)+0.01",{min:1, max:3, stroke:"none",fill:"#ddd",points:50});
</div>
<div class='SVGgraph' options='width:100,scales:[-2,2,-1,9]'>
dot([-1,0])
dot([0,0],{markerstroke:"red",id:"l1"})
dot([1,0],{markerfill:"red",id:"l2"})
dot([-1,1],{marker:"*"})
dot([0,1],{markerstroke:"yellow",marker:"*",id:"l3"})
dot([-1,2],{marker:"s"})
dot([0,2],{marker:"s",markerstroke:"red",id:"l4"})
dot([1,2],{marker:"s",markerfill:"red",id:"new3"})
dot([-1,3],{marker:"S"})
dot([0,3],{marker:"S",markerstroke:"yellow",id:"l5"})
dot([-1,4],{marker:"x"})
dot([0,4],{marker:"x",markerstroke:"red",id:"l9"})
dot([-1,5],{marker:"+"})
dot([0,5],{marker:"+",markerstroke:"red",id:"l10"})
dot([-1,6],{marker:">"})
dot([0,6],{marker:">",markerstroke:"red",id:"l6"})
dot([-1,7],{marker:"<"})
dot([0,7],{marker:"<",markerstroke:"red",id:"l7"})
dot([-1,8],{marker:"|"})
dot([0,8],{marker:"|",markerstroke:"red",id:"l8"})
</div>
<div class='SVGgraph' options='scales:[-6,6],coords:"polar"'>
function f(x){return a*cos(x);}

function g(x){return b*sin(x);}

function moveit() {
  var angle = getAngle();
  parametricPlot(f,g,{max:angle,id:"ell",stroke:"darkorange",strokewidth:2});
  path([[-c,0],[a*cos(angle),b*sin(angle)],[c,0]],{id:"gen",stroke:"blue",strokewidth:1,strokedasharray:"5,5"});
image('figuras/moon.png',{id:"moon",origin:[a*cos(angle),b*sin(angle)],width:20,height:20});
}

setAction("mousemove",moveit);
axes({ticklabels:false});
var a = 5;
var b = 3.5;
var c = sqrt(a*a-b*b);
dot([-c,0],{id:"sol",marker:"*",size:40,markerstroke:"#FFD500",label:"Sol",pos:"S"});
dot([c,0],{marker:"*",size:8});
</div>
Array environment with a single doesn't appear to render correctly:
 
! This works
$$ \mathbf{A} = \left[ \begin{array}{cccc} 1-x & 0 & 0 & e \\ 0 & 1-x & 0 & f \\ 0 & 0 & 1-x & g \end{array} \right]$$
 
! Just the first line: Notes missing "1" in first entry and displays ampersand
$$ \mathbf{A} = \left[ \begin{array}{cccc}  1-x & 0 & 0 & e  \end{array} \right]$$
 
! If you add a final slash-slash it doesn't display amps, but still missing "1"
$$ \mathbf{A} = \left[ \begin{array}{cccc}  1-x & 0 & 0 & e \\  \end{array} \right]$$
 
 
$$ \mathbf{A} = \left[  1-x \; 0 \; 0 \; e \right]$$
|Nome|Fórmula molecular|Fórmula de estrutura condensada|h
|Met''ano''|$CH_4$|$CH_4$|
|Et''ano''|$C_2H_6$|$CH_3-CH_3$|
|Prop''ano''|$C_3H_8$|$CH_3-CH_2-CH_3$|
|But''ano''|$C_4H_{10}$|$CH_3-CH_2-CH_2 CH_3$|
|Pent''ano''|$C_5H_{12}$|$CH_3-CH_2-CH_2-CH_2-CH_3$|
|...|...|$\ldots$|

{{myMath{
$$f(x) = \left\{\begin{array}{ll}
x^2 \sin \frac1x, & \textrm{if}\, x \ne 0, \\
0, & \textrm{if}\, x = 0 .
\end{array}\right.$$
}}}
$$\begin{eqnarray} x & = & \frac{-7 \pm \sqrt{49 - 24}}{6} \\
& = & -2\, \textrm{or}\, -\frac13. \end{eqnarray}$$
$x_1+3-\frac{5}{4}$
$\DD\left(\frac{4}{3}\pir^3\right)=4\pir^2$ $$x_2$$
$x_1 e^{-x^2/2}$ $$x_2\in\R$$
Surround  ~LaTeX formulas with {{{$}}}-signs:  $\sum_{i=1}^ni=\frac{n(n+1)}{2}$
$$\int_0^{\pi/2} \sin x\,dx=1$$
<div class='SVGgraph' options='width:320,height:200,scales:[-1.1,3.1]'>
function upX(){a++;update();}
function downX(){a--;update();}
function upY(){b++;update();}
function downY(){b--;update();}

function f(x){return sin(a*x);}
function g(x){return sin(b*x);}

function update() {
  parametricPlot(f,g,{id:"lsj"});
  text([2,1],"$x=\\sin("+a+"t)$",{id:"x"});
  text([2,0.4],"$y=\\sin("+b+"t)$",{id:"y"});
}
axes({scales:[-1.4,1.4]});
button([1.5,0.65],[1.7,0.85],"-",downX,{fill:"grey",fillopacity:0.5,rx:0.05,ry:0.05,stroke:"none"});
button([1.8,0.65],[2.0,0.85],"+",upX,{fill:"grey",fillopacity:0.5,rx:0.05,ry:0.05,stroke:"none"});
button([1.5,0.05],[1.7,0.25],"-",downY,{fill:"grey",fillopacity:0.5,rx:0.05,ry:0.05,stroke:"none"});
button([1.8,0.05],[2.0,0.25],"+",upY,{fill:"grey",fillopacity:0.5,rx:0.05,ry:0.05,stroke:"none"});
setOptions({stroke: "red"});
var a = 2;
var b = 3;
update();
</div>
Click to refresh the graph
<div class='SVGgraph' options="width:300,height:200,scales:[-2.5,22,1.05,2.8], border:'5px solid black'">
function goforit(){
if(typeof cstep=='undefined'){cstep=0;}
cstep++;
switch(cstep%4){
case 0:
setScales([-2.5,20,1.05,2.8]);
axes({origin:[0,1.3], dx:5, dy:0.2});
break;
case 1:
setScales([-10,60,0.4,5]);
axes({origin:[0,1.0], dx:10, dy:0.5});
plot("0.06*x+1.4");
break;
case 2:
setScales([-10,60,0.4,5]);
axes({origin:[0,1.0], dx:10, dy:0.5});
plot("0.06*x+1.4");
plot("-0.0005*x*x+0.07*x+1.4",{stroke:"green"});
break;
case 3:
setScales([-25,190,0,3.5]);
plot("2+sin(2*PI/100*(x-10))",{id:"data",min:0,max:180,stroke:"none",marker:"ooo",markerfill:"#FFD500",markerstroke:"none",points:50});
axes({origin:[0,0.5], dx:50, dy:0.5,decy:1});
break;
}
return false;
}


axes({origin:[0,1.3], dx:5, dy:0.2,decy:1});
plot("2+sin(2*PI/100*(x-10))",{id:"data",min:0,max:20,stroke:"none",marker:"ooo",markerfill:"#FFD500",markerstroke:"none",points:10})
if(typeof cstep=='undefined') setAction("mousedown",goforit);
</div>
#~ASCIIMath notation is not supported
#Includes a customisable image fallback when ~MathML is not supported (using an experimental Google service by default)
#Only image fallback in Internet Explorer
#No support for any ~LateX environments unrelated to the writing of mathematical expressions
#No automatic detection of equations (automath mode)
#SVG plotting code completely rewritten with new features
#SVG in Internet Explorer is not supported
!~LaTeX
*All code under a namespace (MSVG is the only global variable)
*Updated character tables from Michael A. Ziegler suggestions
*Add a couple of characters as suggested by users in website
*Changed //define// function to accept an array of new symbols
!SVG
*Pan and zoom
*Export SVG code
*Simplified keyboard and mouse interaction
*Optional display of polar coordinates
*Markers and endpoints unified and replaced by proper SVG markers
*Markers and enpoints are attached to the owner path
*New function to fill area between functions
*Improved picture border
*Added rotation and translation of objects
*Mouse events are handled by addEventListener which makes possible multiple handlers for any event
*All optional arguments of functions that produce SVG objects are defined in an optional object argument 
*SVG objects' id's and names of variables or functions defined in a script are unique (variables and functions must be attached to the 'dynamic' object) 
*Added a few auxilliary functions (Gamma, Beta, range, root, max, min...)
*Added polar grid
*Added parametric plot
<div class='SVGgraph' options="border:'2px solid black'">
function left(){
  pos--;
  circle([pos,0],1,{id:'bola',stroke:"none",fill:"orange",fillopacity:0.5});
}

function right(){
  pos++;
  circle([pos,0],1,{id:'bola',stroke:"none",fill:"orange",fillopacity:0.5});
}

axes();
var pos=0;
circle([0,0],1,{id:'bola',stroke:"none",fill:"orange",fillopacity:0.5});
button([SVG.xmin+0.05,SVG.ymin+0.05],[SVG.xmin+0.8,SVG.ymin+0.6],"<",left,{fill:"grey",fillopacity:0.5,rx:0.05,ry:0.05,stroke:"yellow"});
button([SVG.xmin+0.95,SVG.ymin+0.05],[SVG.xmin+1.7,SVG.ymin+0.6],">",right,{fill:"grey",fillopacity:0.5,rx:0.05,ry:0.05,stroke:"yellow"});
</div>
<div class='SVGgraph'>
setOptions({type:'*', stroke:'red', size:20});
dot([0,0]);
setOptions({type:'o', fill:'orange', size:10});
dot([0,1]);
</div>
<div class='SVGgraph' options='width:200,height:150,scales:[-2.5,2.5,-2.5,2.5]'>
grid();
polygon([[-2,1],[-2,-1],[-0.5,-1],[-0.5,1]],{stroke:"blue",strokewidth:1,marker:"ooo",size:12,markerstroke:"orange",markerstrokewidth:0.5,markerfill:"green",fill:"fuchsia",fillopacity:0.5});
polygon([[2,1],[2,-1],[0.5,-1],[0.5,1]],{stroke:"blue",strokewidth:3,marker:"ooo",size:12,markerstroke:"orange",markerstrokewidth:0.5,markerfill:"green",fill:"fuchsia",fillopacity:0.5});
</div>
<!--{{{-->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nobile:regular,italic,bold,bolditalic&subset=latin|Droid+Serif:regular,italic,bold,bolditalic&subset=latin|Droid+Sans+Mono&subset=latin">
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
!The Lorenz Equations
\[\begin{eqnarray}
\dot{x} & = & \sigma(y-x) \\
\dot{y} & = & \rho x - y - xz \\
\dot{z} & = & -\beta z + xy
\end{eqnarray}\]
!The ~Cauchy-Schwarz Inequality
\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2
\right) \left( \sum_{k=1}^n b_k^2 \right) \]
!A Cross Product Formula
\[\mathbf{V}_1 \times \mathbf{V}_2 =  \left|\begin{array}{ccc}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\ 
             \frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v}
& 0
\end{array}\right|  \]
!The probability of getting \(k\) heads when flipping \(n\) coins is: 
\[P(E)   = {n \choose k} p^k (1-p)^{ n-k} \]
!An Identity of Ramanujan
\[ \frac{1}{\left(\sqrt{\phi \sqrt{5}}-\phi\right) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } } \]
!A ~Rogers-Ramanujan Identity
\[  1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
\prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
\quad\quad \textrm{for}\quad |q|<1. \]
!Maxwell's Equations
\[\begin{eqnarray}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\,\frac{\partial\vec{\mathbf{E}}}{\partial t} & = & \frac{4\pi}{c}\vec{\mathbf{j}} \\
\nabla \cdot \vec{\mathbf{E}} & = & 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\,\frac{\partial\vec{\mathbf{B}}}{\partial t} & = &\vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = & 0
\end{eqnarray}\]
Finally, while display equations look good for a page of samples, the ability to mix math and text in a paragraph is also important. This expression \(\sqrt{3x-1}+(1+x)^2\) is an example of an inline equation.  As you see, ~MathJax equations can be used this way as well, without unduly disturbing the spacing between lines.
[>img[figuras/MSVGlogo.png]] <div class='SVGgraph' options='width:100,height:120,scales:[0,3,-2,1.8]'>
grid({dx:0.5});
text([0,0.15],"$\\Sigma$",{fontsize:80,fontfill:"grey",pos:"e"});
text([0,0.1],"$\\Sigma$",{fontsize:76,fontfill:"#afc6e9",pos:"e"});
text([0,-1.75],"MathSVG",{fontsize:19,fill:"black",fontweight:"bold",pos:"e"});
text([1.3,0.1],"$x^2+\\frac{b}{a}=0$",{fontsize:10,fontfill:"red",pos:"e"});
text([0.05,-1.2],"$(a,b]= \\{x \\in \\R$",{fontsize:12,fontfill:"red",pos:"e"});
circle([2.5,1.1],0.4,{stroke:"orange",strokewidth:2,fill:"#eee"});
text([2.5,1.1],"1.0",{fontfill:"blue",fontsize:11});
</div>
The ~MathSVG part of the plugin in this ~TidddlyWiki is minified in order to minimize the plugin's size. The original version of that code can be download [[here|MathSVG.js]].
/***
|''Name:''|MathSVGPlugin|
|''Description:''|This plugin translates a subset of the LaTeX math notation to MathML with a customisable  image fallback when MathML is not supported. It also provides an easy way to produce mathematical SVG graphics with dynamical features and animation.|
|''Version:''|1.4.6|
|''Date:''|2012-12-29|
|''Source:''|http://www.math.ist.utl.pt/~psoares/MathSVG.html|
|''Author:''|Paulo Soares|
|''License:''|[[GNU Lesser General Public License|http://www.gnu.org/licences/lgpl.html]]|
|''~CoreVersion:''|2.5.0|
!Original copyright notice
{{{
ASCIIMathML.js
==============
Version 2.1 Oct 8, 2008, (c) Peter Jipsen http://www.chapman.edu/~jipsen
This version extends ASCIIMathML.js with LaTeXMathML.js and ASCIIsvg.js.
Latest version at http://www.chapman.edu/~jipsen/mathml/ASCIIMathML.js
If you use it on a webpage, please send the URL to jipsen@chapman.edu

The LaTeXMathML modifications were made by Douglas Woodall, June 2006.
(for details see header on the LaTeXMathML part in middle of file)
Extensive clean-up and improvements by Paulo Soares, Oct 2007.

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation; either version 2.1 of the License, or (at
your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT 
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License 
(at http://www.gnu.org/licences/lgpl.html) for more details.
}}}
!~MathSVG code (minified)
***/
//{{{
Math.sec=function(a){return 1/Math.cos(a)};Math.csc=function(a){return 1/Math.sin(a)};Math.cot=function(a){return 1/Math.tan(a)};Math.asec=function(a){return Math.acos(1/a)};Math.acsc=function(a){return Math.asin(1/a)};Math.acot=function(a){return Math.atan(1/a)};Math.sinh=function(a){return(Math.exp(a)-Math.exp(-a))/2};Math.cosh=function(a){return(Math.exp(a)+Math.exp(-a))/2};Math.tanh=function(a){return(Math.exp(a)-Math.exp(-a))/(Math.exp(a)+Math.exp(-a))};Math.sech=function(a){return 1/Math.cosh(a)};Math.csch=function(a){return 1/Math.sinh(a)};Math.coth=function(a){return 1/Math.tanh(a)};Math.asinh=function(a){return Math.log(a+Math.sqrt(a*a+1))};Math.acosh=function(a){return Math.log(a+Math.sqrt(a*a-1))};Math.atanh=function(a){return Math.log((1+a)/(1-a))/2};Math.sech=function(a){return 1/Math.cosh(a)};Math.csch=function(a){return 1/Math.sinh(a)};Math.coth=function(a){return 1/Math.tanh(a)};Math.asech=function(a){return Math.acosh(1/a)};Math.acsch=function(a){return Math.asinh(1/a)};Math.acoth=function(a){return Math.atanh(1/a)};Math.sign=function(a){return(a===0?0:(a<0?-1:1))};Math.step=function(a,c,b){return(a<0?(b?b:0):(c?c:1))};Math.root=function(a,b){return Math.pow(a,1/b)};Math.factorial=function(b){if(b===0){return 1}if(b<0){if((b%1)===0){return}if(b>-1){return Math.factorial(b+1)/(b+1)}return -Math.PI/(Math.factorial(-1-b)*Math.sin(Math.PI*b))}var a=b;if((b%1)===0){while(b>1){b=b-1;a=a*b}}else{a=Math.exp((b+0.5)*Math.log(b+1)-b-b*(0.1121105+b*0.08106103)/(1.452342+b*(2.410858+b)))}return a};Math.Gamma=function(a){return Math.factorial(a-1)};Math.Beta=function(a,b){return Math.Gamma(a)*Math.Gamma(b)/Math.Gamma(a+b)};Math.C=function(a,b){var c=1/((a+1)*Math.Beta(b+1,a-b+1));return c};Math.truncate=function(a,c){var b=c||0;return Math.floor(a*Math.pow(10,b))/Math.pow(10,b)};Math.randomString=function(a,g){var f=(g||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz").split("");var e=[],c=Math.random;var d=f.length;for(var b=0;b<a;b++){e[b]=f[0|c()*d]}return e.join("")};Math.runif=function(d,c,f){var e=f||0;return Math.truncate((c+Math.pow(10,-e)-d)*Math.random()+d,e)};Math.rnormal=function(a,b){a=a||0;b=b||1;var d=0,c=0;while(d*c===0){d=Math.random();c=Math.random()}return b*(Math.sqrt(-2*Math.log(d))*Math.cos(2*Math.PI*c))+a};(function(){var a=jQuery.fn.attr,b="http://www.w3.org/2000/svg";jQuery.fn.attr=function(m,l){var g=this.length;if(!g){return this}for(var f=0;f<g;f++){var c=this[f];if(c.namespaceURI===b){if(l!==undefined){c.setAttribute(m,l)}else{if($.isArray(m)){var d=m.length,e={};while(d--){var k=m[d];var h=c.getAttribute(k);if(h||h==="0"){h=isNaN(h)?h:h-0}e[k]=h}return e}else{if(typeof m==="object"){for(v in m){c.setAttribute(v,m[v])}}else{var h=c.getAttribute(m);if(h||h==="0"){h=isNaN(h)?h:h-0}return h}}}}else{return a.apply(this,arguments)}}return this}}());var MSVG=function($){var cal=["\uD835\uDC9C","\u212C","\uD835\uDC9E","\uD835\uDC9F","\u2130","\u2131","\uD835\uDCA2","\u210B","\u2110","\uD835\uDCA5","\uD835\uDCA6","\u2112","\u2133","\uD835\uDCA9","\uD835\uDCAA","\uD835\uDCAB","\uD835\uDCAC","\u211B","\uD835\uDCAE","\uD835\uDCAF","\uD835\uDCB0","\uD835\uDCB1","\uD835\uDCB2","\uD835\uDCB3","\uD835\uDCB4","\uD835\uDCB5","\uD835\uDCB6","\uD835\uDCB7","\uD835\uDCB8","\uD835\uDCB9","\u212F","\uD835\uDCBB","\u210A","\uD835\uDCBD","\uD835\uDCBE","\uD835\uDCBF","\uD835\uDCC0","\uD835\uDCC1","\uD835\uDCC2","\uD835\uDCC3","\u2134","\uD835\uDCC5","\uD835\uDCC6","\uD835\uDCC7","\uD835\uDCC8","\uD835\uDCC9","\uD835\uDCCA","\uD835\uDCCB","\uD835\uDCCC","\uD835\uDCCD","\uD835\uDCCE","\uD835\uDCCF"];var frk=["\uD835\uDD04","\uD835\uDD05","\u212D","\uD835\uDD07","\uD835\uDD08","\uD835\uDD09","\uD835\uDD0A","\u210C","\u2111","\uD835\uDD0D","\uD835\uDD0E","\uD835\uDD0F","\uD835\uDD10","\uD835\uDD11","\uD835\uDD12","\uD835\uDD13","\uD835\uDD14","\u211C","\uD835\uDD16","\uD835\uDD17","\uD835\uDD18","\uD835\uDD19","\uD835\uDD1A","\uD835\uDD1B","\uD835\uDD1C","\u2128","\uD835\uDD1E","\uD835\uDD1F","\uD835\uDD20","\uD835\uDD21","\uD835\uDD22","\uD835\uDD23","\uD835\uDD24","\uD835\uDD25","\uD835\uDD26","\uD835\uDD27","\uD835\uDD28","\uD835\uDD29","\uD835\uDD2A","\uD835\uDD2B","\uD835\uDD2C","\uD835\uDD2D","\uD835\uDD2E","\uD835\uDD2F","\uD835\uDD30","\uD835\uDD31","\uD835\uDD32","\uD835\uDD33","\uD835\uDD34","\uD835\uDD35","\uD835\uDD36","\uD835\uDD37"];var bbb=["\uD835\uDD38","\uD835\uDD39","\u2102","\uD835\uDD3B","\uD835\uDD3C","\uD835\uDD3D","\uD835\uDD3E","\u210D","\uD835\uDD40","\uD835\uDD41","\uD835\uDD42","\uD835\uDD43","\uD835\uDD44","\u2115","\uD835\uDD46","\u2119","\u211A","\u211D","\uD835\uDD4A","\uD835\uDD4B","\uD835\uDD4C","\uD835\uDD4D","\uD835\uDD4E","\uD835\uDD4F","\uD835\uDD50","\u2124","\uD835\uDD52","\uD835\uDD53","\uD835\uDD54","\uD835\uDD55","\uD835\uDD56","\uD835\uDD57","\uD835\uDD58","\uD835\uDD59","\uD835\uDD5A","\uD835\uDD5B","\uD835\uDD5C","\uD835\uDD5D","\uD835\uDD5E","\uD835\uDD5F","\uD835\uDD60","\uD835\uDD61","\uD835\uDD62","\uD835\uDD63","\uD835\uDD64","\uD835\uDD65","\uD835\uDD66","\uD835\uDD67","\uD835\uDD68","\uD835\uDD69","\uD835\uDD6A","\uD835\uDD6B"];var CONST=0,UNARY=1,BINARY=2,INFIX=3,LEFTBRACKET=4,RIGHTBRACKET=5,SPACE=6,UNDEROVER=7,DEFINITION=8,LEFTRIGHT=9,TEXT=10,BIG=11,STRETCHY=13,MATRIX=14;var symbols=[{input:"\\varepsilon",tag:"mi",output:"\u025B",ttype:CONST},{input:"\\varsigma",tag:"mi",output:"\u03C2",ttype:CONST},{input:"\\vartheta",tag:"mi",output:"\u03D1",ttype:CONST},{input:"\\varphi",tag:"mi",output:"\u03D5",ttype:CONST},{input:"\\varpi",tag:"mi",output:"\u03D6",ttype:CONST},{input:"\\varrho",tag:"mi",output:"\u03F1",ttype:CONST},{input:"\\alpha",tag:"mi",output:"\u03B1",ttype:CONST},{input:"\\beta",tag:"mi",output:"\u03B2",ttype:CONST},{input:"\\gamma",tag:"mi",output:"\u03B3",ttype:CONST},{input:"\\delta",tag:"mi",output:"\u03B4",ttype:CONST},{input:"\\epsilon",tag:"mi",output:"\u03B5",ttype:CONST},{input:"\\zeta",tag:"mi",output:"\u03B6",ttype:CONST},{input:"\\eta",tag:"mi",output:"\u03B7",ttype:CONST},{input:"\\theta",tag:"mi",output:"\u03B8",ttype:CONST},{input:"\\iota",tag:"mi",output:"\u03B9",ttype:CONST},{input:"\\kappa",tag:"mi",output:"\u03BA",ttype:CONST},{input:"\\lambda",tag:"mi",output:"\u03BB",ttype:CONST},{input:"\\mu",tag:"mi",output:"\u03BC",ttype:CONST},{input:"\\nu",tag:"mi",output:"\u03BD",ttype:CONST},{input:"\\xi",tag:"mi",output:"\u03BE",ttype:CONST},{input:"\\omicron",tag:"mi",output:"\u03BF",ttype:CONST},{input:"\\pi",tag:"mi",output:"\u03C0",ttype:CONST},{input:"\\rho",tag:"mi",output:"\u03C1",ttype:CONST},{input:"\\sigma",tag:"mi",output:"\u03C3",ttype:CONST},{input:"\\tau",tag:"mi",output:"\u03C4",ttype:CONST},{input:"\\upsilon",tag:"mi",output:"\u03C5",ttype:CONST},{input:"\\phi",tag:"mi",output:"\u03C6",ttype:CONST},{input:"\\chi",tag:"mi",output:"\u03C7",ttype:CONST},{input:"\\psi",tag:"mi",output:"\u03C8",ttype:CONST},{input:"\\omega",tag:"mi",output:"\u03C9",ttype:CONST},{input:"\\Alpha",tag:"mo",output:"\u0391",ttype:CONST},{input:"\\Beta",tag:"mo",output:"\u0392",ttype:CONST},{input:"\\Gamma",tag:"mo",output:"\u0393",ttype:CONST},{input:"\\Delta",tag:"mo",output:"\u0394",ttype:CONST},{input:"\\Epsilon",tag:"mo",output:"\u0395",ttype:CONST},{input:"\\Zeta",tag:"mo",output:"\u0396",ttype:CONST},{input:"\\Eta",tag:"mo",output:"\u0397",ttype:CONST},{input:"\\Theta",tag:"mo",output:"\u0398",ttype:CONST},{input:"\\Iota",tag:"mo",output:"\u0399",ttype:CONST},{input:"\\Kappa",tag:"mo",output:"\u039A",ttype:CONST},{input:"\\Lambda",tag:"mo",output:"\u039B",ttype:CONST},{input:"\\Mu",tag:"mo",output:"\u039C",ttype:CONST},{input:"\\Nu",tag:"mo",output:"\u039D",ttype:CONST},{input:"\\Xi",tag:"mo",output:"\u039E",ttype:CONST},{input:"\\Omicron",tag:"mo",output:"\u039F",ttype:CONST},{input:"\\Pi",tag:"mo",output:"\u03A0",ttype:CONST},{input:"\\Rho",tag:"mo",output:"\u03A1",ttype:CONST},{input:"\\Sigma",tag:"mo",output:"\u03A3",ttype:CONST},{input:"\\Tau",tag:"mo",output:"\u03A4",ttype:CONST},{input:"\\Upsilon",tag:"mo",output:"\u03A5",ttype:CONST},{input:"\\Phi",tag:"mo",output:"\u03A6",ttype:CONST},{input:"\\Chi",tag:"mo",output:"\u03A7",ttype:CONST},{input:"\\Psi",tag:"mo",output:"\u03A8",ttype:CONST},{input:"\\Omega",tag:"mo",output:"\u03A9",ttype:CONST},{input:"\\frac12",tag:"mo",output:"\u00BD",ttype:CONST},{input:"\\frac14",tag:"mo",output:"\u00BC",ttype:CONST},{input:"\\frac34",tag:"mo",output:"\u00BE",ttype:CONST},{input:"\\frac13",tag:"mo",output:"\u2153",ttype:CONST},{input:"\\frac23",tag:"mo",output:"\u2154",ttype:CONST},{input:"\\frac15",tag:"mo",output:"\u2155",ttype:CONST},{input:"\\frac25",tag:"mo",output:"\u2156",ttype:CONST},{input:"\\frac35",tag:"mo",output:"\u2157",ttype:CONST},{input:"\\frac45",tag:"mo",output:"\u2158",ttype:CONST},{input:"\\frac16",tag:"mo",output:"\u2159",ttype:CONST},{input:"\\frac56",tag:"mo",output:"\u215A",ttype:CONST},{input:"\\frac18",tag:"mo",output:"\u215B",ttype:CONST},{input:"\\frac38",tag:"mo",output:"\u215C",ttype:CONST},{input:"\\frac58",tag:"mo",output:"\u215D",ttype:CONST},{input:"\\frac78",tag:"mo",output:"\u215E",ttype:CONST},{input:"\\pm",tag:"mo",output:"\u00B1",ttype:CONST},{input:"\\mp",tag:"mo",output:"\u2213",ttype:CONST},{input:"\\triangleleft",tag:"mo",output:"\u22B2",ttype:CONST},{input:"\\triangleright",tag:"mo",output:"\u22B3",ttype:CONST},{input:"\\cdot",tag:"mo",output:"\u22C5",ttype:CONST},{input:"\\star",tag:"mo",output:"\u22C6",ttype:CONST},{input:"\\ast",tag:"mo",output:"\u002A",ttype:CONST},{input:"\\times",tag:"mo",output:"\u00D7",ttype:CONST},{input:"\\div",tag:"mo",output:"\u00F7",ttype:CONST},{input:"\\circ",tag:"mo",output:"\u2218",ttype:CONST},{input:"\\bullet",tag:"mo",output:"\u2022",ttype:CONST},{input:"\\oplus",tag:"mo",output:"\u2295",ttype:CONST},{input:"\\ominus",tag:"mo",output:"\u2296",ttype:CONST},{input:"\\otimes",tag:"mo",output:"\u2297",ttype:CONST},{input:"\\bigcirc",tag:"mo",output:"\u25CB",ttype:CONST},{input:"\\oslash",tag:"mo",output:"\u2298",ttype:CONST},{input:"\\odot",tag:"mo",output:"\u2299",ttype:CONST},{input:"\\land",tag:"mo",output:"\u2227",ttype:CONST},{input:"\\wedge",tag:"mo",output:"\u2227",ttype:CONST},{input:"\\lor",tag:"mo",output:"\u2228",ttype:CONST},{input:"\\vee",tag:"mo",output:"\u2228",ttype:CONST},{input:"\\cap",tag:"mo",output:"\u2229",ttype:CONST},{input:"\\cup",tag:"mo",output:"\u222A",ttype:CONST},{input:"\\sqcap",tag:"mo",output:"\u2293",ttype:CONST},{input:"\\sqcup",tag:"mo",output:"\u2294",ttype:CONST},{input:"\\uplus",tag:"mo",output:"\u228E",ttype:CONST},{input:"\\amalg",tag:"mo",output:"\u2210",ttype:CONST},{input:"\\bigtriangleup",tag:"mo",output:"\u25B3",ttype:CONST},{input:"\\bigtriangledown",tag:"mo",output:"\u25BD",ttype:CONST},{input:"\\dag",tag:"mo",output:"\u2020",ttype:CONST},{input:"\\dagger",tag:"mo",output:"\u2020",ttype:CONST},{input:"\\ddag",tag:"mo",output:"\u2021",ttype:CONST},{input:"\\ddagger",tag:"mo",output:"\u2021",ttype:CONST},{input:"\\lhd",tag:"mo",output:"\u22B2",ttype:CONST},{input:"\\rhd",tag:"mo",output:"\u22B3",ttype:CONST},{input:"\\unlhd",tag:"mo",output:"\u22B4",ttype:CONST},{input:"\\unrhd",tag:"mo",output:"\u22B5",ttype:CONST},{input:"\\sum",tag:"mo",output:"\u2211",ttype:UNDEROVER},{input:"\\prod",tag:"mo",output:"\u220F",ttype:UNDEROVER},{input:"\\bigcap",tag:"mo",output:"\u22C2",ttype:UNDEROVER},{input:"\\bigcup",tag:"mo",output:"\u22C3",ttype:UNDEROVER},{input:"\\bigwedge",tag:"mo",output:"\u22C0",ttype:UNDEROVER},{input:"\\bigvee",tag:"mo",output:"\u22C1",ttype:UNDEROVER},{input:"\\bigsqcap",tag:"mo",output:"\u2A05",ttype:UNDEROVER},{input:"\\bigsqcup",tag:"mo",output:"\u2A06",ttype:UNDEROVER},{input:"\\coprod",tag:"mo",output:"\u2210",ttype:UNDEROVER},{input:"\\bigoplus",tag:"mo",output:"\u2A01",ttype:UNDEROVER},{input:"\\bigotimes",tag:"mo",output:"\u2A02",ttype:UNDEROVER},{input:"\\bigodot",tag:"mo",output:"\u2A00",ttype:UNDEROVER},{input:"\\biguplus",tag:"mo",output:"\u2A04",ttype:UNDEROVER},{input:"\\int",tag:"mo",output:"\u222B",ttype:CONST},{input:"\\oint",tag:"mo",output:"\u222E",ttype:CONST},{input:":=",tag:"mo",output:":=",ttype:CONST},{input:"\\lt",tag:"mo",output:"<",ttype:CONST},{input:"\\gt",tag:"mo",output:">",ttype:CONST},{input:"\\ne",tag:"mo",output:"\u2260",ttype:CONST},{input:"\\neq",tag:"mo",output:"\u2260",ttype:CONST},{input:"\\le",tag:"mo",output:"\u2264",ttype:CONST},{input:"\\leq",tag:"mo",output:"\u2264",ttype:CONST},{input:"\\leqslant",tag:"mo",output:"\u2264",ttype:CONST},{input:"\\ge",tag:"mo",output:"\u2265",ttype:CONST},{input:"\\geq",tag:"mo",output:"\u2265",ttype:CONST},{input:"\\geqslant",tag:"mo",output:"\u2265",ttype:CONST},{input:"\\equiv",tag:"mo",output:"\u2261",ttype:CONST},{input:"\\ll",tag:"mo",output:"\u226A",ttype:CONST},{input:"\\gg",tag:"mo",output:"\u226B",ttype:CONST},{input:"\\doteq",tag:"mo",output:"\u2250",ttype:CONST},{input:"\\prec",tag:"mo",output:"\u227A",ttype:CONST},{input:"\\succ",tag:"mo",output:"\u227B",ttype:CONST},{input:"\\preceq",tag:"mo",output:"\u227C",ttype:CONST},{input:"\\succeq",tag:"mo",output:"\u227D",ttype:CONST},{input:"\\subset",tag:"mo",output:"\u2282",ttype:CONST},{input:"\\supset",tag:"mo",output:"\u2283",ttype:CONST},{input:"\\subseteq",tag:"mo",output:"\u2286",ttype:CONST},{input:"\\supseteq",tag:"mo",output:"\u2287",ttype:CONST},{input:"\\sqsubset",tag:"mo",output:"\u228F",ttype:CONST},{input:"\\sqsupset",tag:"mo",output:"\u2290",ttype:CONST},{input:"\\sqsubseteq",tag:"mo",output:"\u2291",ttype:CONST},{input:"\\sqsupseteq",tag:"mo",output:"\u2292",ttype:CONST},{input:"\\sim",tag:"mo",output:"\u223C",ttype:CONST},{input:"\\simeq",tag:"mo",output:"\u2243",ttype:CONST},{input:"\\approx",tag:"mo",output:"\u2248",ttype:CONST},{input:"\\cong",tag:"mo",output:"\u2245",ttype:CONST},{input:"\\Join",tag:"mo",output:"\u22C8",ttype:CONST},{input:"\\bowtie",tag:"mo",output:"\u22C8",ttype:CONST},{input:"\\in",tag:"mo",output:"\u2208",ttype:CONST},{input:"\\ni",tag:"mo",output:"\u220B",ttype:CONST},{input:"\\owns",tag:"mo",output:"\u220B",ttype:CONST},{input:"\\propto",tag:"mo",output:"\u221D",ttype:CONST},{input:"\\vdash",tag:"mo",output:"\u22A2",ttype:CONST},{input:"\\dashv",tag:"mo",output:"\u22A3",ttype:CONST},{input:"\\models",tag:"mo",output:"\u22A8",ttype:CONST},{input:"\\perp",tag:"mo",output:"\u22A5",ttype:CONST},{input:"\\smile",tag:"mo",output:"\u2323",ttype:CONST},{input:"\\frown",tag:"mo",output:"\u2322",ttype:CONST},{input:"\\asymp",tag:"mo",output:"\u224D",ttype:CONST},{input:"\\notin",tag:"mo",output:"\u2209",ttype:CONST},{input:"\\begin{eqnarray}",output:"X",ttype:MATRIX,invisible:true},{input:"\\begin{array}",output:"X",ttype:MATRIX,invisible:true},{input:"\\\\",output:"}&{",ttype:DEFINITION},{input:"\\end{eqnarray}",output:"}}",ttype:DEFINITION},{input:"\\end{array}",output:"}}",ttype:DEFINITION},{input:"\\big",tag:"mo",output:"X",atval:"1.2",ttype:BIG},{input:"\\Big",tag:"mo",output:"X",atval:"1.8",ttype:BIG},{input:"\\bigg",tag:"mo",output:"X",atval:"2.3",ttype:BIG},{input:"\\Bigg",tag:"mo",output:"X",atval:"2.9",ttype:BIG},{input:"\\left",tag:"mo",output:"X",ttype:LEFTBRACKET},{input:"\\right",tag:"mo",output:"X",ttype:RIGHTBRACKET},{input:"{",output:"{",ttype:LEFTBRACKET,invisible:true},{input:"}",output:"}",ttype:RIGHTBRACKET,invisible:true},{input:"(",tag:"mo",output:"(",atval:"1",ttype:STRETCHY},{input:"[",tag:"mo",output:"[",atval:"1",ttype:STRETCHY},{input:"\\lbrack",tag:"mo",output:"[",atval:"1",ttype:STRETCHY},{input:"\\{",tag:"mo",output:"{",atval:"1",ttype:STRETCHY},{input:"\\lbrace",tag:"mo",output:"{",atval:"1",ttype:STRETCHY},{input:"\\langle",tag:"mo",output:"\u2329",atval:"1",ttype:STRETCHY},{input:"\\lfloor",tag:"mo",output:"\u230A",atval:"1",ttype:STRETCHY},{input:"\\lceil",tag:"mo",output:"\u2308",atval:"1",ttype:STRETCHY},{input:")",tag:"mo",output:")",rtag:"mi",atval:"1",ttype:STRETCHY},{input:"]",tag:"mo",output:"]",rtag:"mi",atval:"1",ttype:STRETCHY},{input:"\\rbrack",tag:"mo",output:"]",rtag:"mi",atval:"1",ttype:STRETCHY},{input:"\\}",tag:"mo",output:"}",rtag:"mi",atval:"1",ttype:STRETCHY},{input:"\\rbrace",tag:"mo",output:"}",rtag:"mi",atval:"1",ttype:STRETCHY},{input:"\\rangle",tag:"mo",output:"\u232A",rtag:"mi",atval:"1",ttype:STRETCHY},{input:"\\rfloor",tag:"mo",output:"\u230B",rtag:"mi",atval:"1",ttype:STRETCHY},{input:"\\rceil",tag:"mo",output:"\u2309",rtag:"mi",atval:"1",ttype:STRETCHY},{input:"|",tag:"mo",output:"\u2223",atval:"1",ttype:STRETCHY},{input:"\\|",tag:"mo",output:"\u2225",atval:"1",ttype:STRETCHY},{input:"\\vert",tag:"mo",output:"\u2223",atval:"1",ttype:STRETCHY},{input:"\\Vert",tag:"mo",output:"\u2225",atval:"1",ttype:STRETCHY},{input:"\\mid",tag:"mo",output:"\u2223",atval:"1",ttype:STRETCHY},{input:"\\parallel",tag:"mo",output:"\u2225",atval:"1",ttype:STRETCHY},{input:"/",tag:"mo",output:"/",atval:"1.01",ttype:STRETCHY},{input:"\\backslash",tag:"mo",output:"\u2216",atval:"1",ttype:STRETCHY},{input:"\\setminus",tag:"mo",output:"\\",ttype:CONST},{input:"\\!",tag:"mspace",atname:"width",atval:"-0.167em",ttype:SPACE},{input:"\\,",tag:"mspace",atname:"width",atval:"0.167em",ttype:SPACE},{input:"\\>",tag:"mspace",atname:"width",atval:"0.222em",ttype:SPACE},{input:"\\:",tag:"mspace",atname:"width",atval:"0.222em",ttype:SPACE},{input:"\\;",tag:"mspace",atname:"width",atval:"0.278em",ttype:SPACE},{input:"~",tag:"mspace",atname:"width",atval:"0.333em",ttype:SPACE},{input:"\\quad",tag:"mspace",atname:"width",atval:"1em",ttype:SPACE},{input:"\\qquad",tag:"mspace",atname:"width",atval:"2em",ttype:SPACE},{input:"\\prime",tag:"mo",output:"\u2032",ttype:CONST},{input:"'",tag:"mo",output:"\u02B9",ttype:CONST},{input:"''",tag:"mo",output:"\u02BA",ttype:CONST},{input:"'''",tag:"mo",output:"\u2034",ttype:CONST},{input:"''''",tag:"mo",output:"\u2057",ttype:CONST},{input:"\\ldots",tag:"mo",output:"\u2026",ttype:CONST},{input:"\\cdots",tag:"mo",output:"\u22EF",ttype:CONST},{input:"\\vdots",tag:"mo",output:"\u22EE",ttype:CONST},{input:"\\ddots",tag:"mo",output:"\u22F1",ttype:CONST},{input:"\\forall",tag:"mo",output:"\u2200",ttype:CONST},{input:"\\exists",tag:"mo",output:"\u2203",ttype:CONST},{input:"\\Re",tag:"mo",output:"\u211C",ttype:CONST},{input:"\\Im",tag:"mo",output:"\u2111",ttype:CONST},{input:"\\aleph",tag:"mo",output:"\u2135",ttype:CONST},{input:"\\hbar",tag:"mo",output:"\u210F",ttype:CONST},{input:"\\ell",tag:"mo",output:"\u2113",ttype:CONST},{input:"\\wp",tag:"mo",output:"\u2118",ttype:CONST},{input:"\\emptyset",tag:"mo",output:"\u2205",ttype:CONST},{input:"\\infty",tag:"mo",output:"\u221E",ttype:CONST},{input:"\\surd",tag:"mo",output:"\\sqrt{}",ttype:DEFINITION},{input:"\\partial",tag:"mo",output:"\u2202",ttype:CONST},{input:"\\nabla",tag:"mo",output:"\u2207",ttype:CONST},{input:"\\triangle",tag:"mo",output:"\u25B3",ttype:CONST},{input:"\\therefore",tag:"mo",output:"\u2234",ttype:CONST},{input:"\\angle",tag:"mo",output:"\u2220",ttype:CONST},{input:"\\diamond",tag:"mo",output:"\u22C4",ttype:CONST},{input:"\\Diamond",tag:"mo",output:"\u25C7",ttype:CONST},{input:"\\neg",tag:"mo",output:"\u00AC",ttype:CONST},{input:"\\lnot",tag:"mo",output:"\u00AC",ttype:CONST},{input:"\\bot",tag:"mo",output:"\u22A5",ttype:CONST},{input:"\\top",tag:"mo",output:"\u22A4",ttype:CONST},{input:"\\square",tag:"mo",output:"\u25AB",ttype:CONST},{input:"\\Box",tag:"mo",output:"\u25A1",ttype:CONST},{input:"\\wr",tag:"mo",output:"\u2240",ttype:CONST},{input:"\\arccos",tag:"mi",output:"arccos",ttype:UNARY,func:true},{input:"\\arcsin",tag:"mi",output:"arcsin",ttype:UNARY,func:true},{input:"\\arctan",tag:"mi",output:"arctan",ttype:UNARY,func:true},{input:"\\arg",tag:"mi",output:"arg",ttype:UNARY,func:true},{input:"\\cos",tag:"mi",output:"cos",ttype:UNARY,func:true},{input:"\\cosh",tag:"mi",output:"cosh",ttype:UNARY,func:true},{input:"\\cot",tag:"mi",output:"cot",ttype:UNARY,func:true},{input:"\\coth",tag:"mi",output:"coth",ttype:UNARY,func:true},{input:"\\csc",tag:"mi",output:"csc",ttype:UNARY,func:true},{input:"\\deg",tag:"mi",output:"deg",ttype:UNARY,func:true},{input:"\\det",tag:"mi",output:"det",ttype:UNARY,func:true},{input:"\\dim",tag:"mi",output:"dim",ttype:UNARY,func:true},{input:"\\exp",tag:"mi",output:"exp",ttype:UNARY,func:true},{input:"\\gcd",tag:"mi",output:"gcd",ttype:UNARY,func:true},{input:"\\hom",tag:"mi",output:"hom",ttype:UNARY,func:true},{input:"\\inf",tag:"mo",output:"inf",ttype:UNDEROVER},{input:"\\ker",tag:"mi",output:"ker",ttype:UNARY,func:true},{input:"\\lg",tag:"mi",output:"lg",ttype:UNARY,func:true},{input:"\\lim",tag:"mo",output:"lim",ttype:UNDEROVER},{input:"\\liminf",tag:"mo",output:"liminf",ttype:UNDEROVER},{input:"\\limsup",tag:"mo",output:"limsup",ttype:UNDEROVER},{input:"\\ln",tag:"mi",output:"ln",ttype:UNARY,func:true},{input:"\\log",tag:"mi",output:"log",ttype:UNARY,func:true},{input:"\\max",tag:"mo",output:"max",ttype:UNDEROVER},{input:"\\min",tag:"mo",output:"min",ttype:UNDEROVER},{input:"\\Pr",tag:"mi",output:"Pr",ttype:UNARY,func:true},{input:"\\sec",tag:"mi",output:"sec",ttype:UNARY,func:true},{input:"\\sin",tag:"mi",output:"sin",ttype:UNARY,func:true},{input:"\\sinh",tag:"mi",output:"sinh",ttype:UNARY,func:true},{input:"\\sup",tag:"mo",output:"sup",ttype:UNDEROVER},{input:"\\tan",tag:"mi",output:"tan",ttype:UNARY,func:true},{input:"\\tanh",tag:"mi",output:"tanh",ttype:UNARY,func:true},{input:"\\gets",tag:"mo",output:"\u2190",ttype:CONST},{input:"\\leftarrow",tag:"mo",output:"\u2190",ttype:CONST},{input:"\\to",tag:"mo",output:"\u2192",ttype:CONST},{input:"\\rightarrow",tag:"mo",output:"\u2192",ttype:CONST},{input:"\\leftrightarrow",tag:"mo",output:"\u2194",ttype:CONST},{input:"\\uparrow",tag:"mo",output:"\u2191",ttype:CONST},{input:"\\downarrow",tag:"mo",output:"\u2193",ttype:CONST},{input:"\\updownarrow",tag:"mo",output:"\u2195",ttype:CONST},{input:"\\Leftarrow",tag:"mo",output:"\u21D0",ttype:CONST},{input:"\\Rightarrow",tag:"mo",output:"\u21D2",ttype:CONST},{input:"\\Leftrightarrow",tag:"mo",output:"\u21D4",ttype:CONST},{input:"\\iff",tag:"mo",output:"~\\Longleftrightarrow~",ttype:DEFINITION},{input:"\\Uparrow",tag:"mo",output:"\u21D1",ttype:CONST},{input:"\\Downarrow",tag:"mo",output:"\u21D3",ttype:CONST},{input:"\\Updownarrow",tag:"mo",output:"\u21D5",ttype:CONST},{input:"\\mapsto",tag:"mo",output:"\u21A6",ttype:CONST},{input:"\\longleftarrow",tag:"mo",output:"\u27F5",ttype:CONST},{input:"\\longrightarrow",tag:"mo",output:"\u27F6",ttype:CONST},{input:"\\longleftrightarrow",tag:"mo",output:"\u27F7",ttype:CONST},{input:"\\Longleftarrow",tag:"mo",output:"\u27F8",ttype:CONST},{input:"\\Longrightarrow",tag:"mo",output:"\u27F9",ttype:CONST},{input:"\\Longleftrightarrow",tag:"mo",output:"\u27FA",ttype:CONST},{input:"\\longmapsto",tag:"mo",output:"\u27FC",ttype:CONST},{input:"\\sqrt",tag:"msqrt",output:"sqrt",ttype:UNARY},{input:"\\root",tag:"mroot",output:"root",ttype:BINARY},{input:"\\frac",tag:"mfrac",output:"/",ttype:BINARY},{input:"\\bfrac",tag:"mfrac",output:"/",ttype:BINARY},{input:"\\stackrel",tag:"mover",output:"stackrel",ttype:BINARY},{input:"\\atop",tag:"mfrac",output:"",ttype:INFIX},{input:"\\choose",tag:"mfrac",output:"",ttype:INFIX},{input:"\\over",tag:"mfrac",output:"/",ttype:INFIX},{input:"_",tag:"msub",output:"_",ttype:INFIX},{input:"^",tag:"msup",output:"^",ttype:INFIX},{input:"\\mbox",tag:"mtext",output:"mbox",ttype:TEXT},{input:"\\acute",tag:"mover",output:"\u00B4",ttype:UNARY,acc:true},{input:"\\grave",tag:"mover",output:"\u0060",ttype:UNARY,acc:true},{input:"\\breve",tag:"mover",output:"\u02D8",ttype:UNARY,acc:true},{input:"\\check",tag:"mover",output:"\u02C7",ttype:UNARY,acc:true},{input:"\\dot",tag:"mover",output:".",ttype:UNARY,acc:true},{input:"\\ddot",tag:"mover",output:"..",ttype:UNARY,acc:true},{input:"\\mathring",tag:"mover",output:"\u00B0",ttype:UNARY,acc:true},{input:"\\vec",tag:"mover",output:"\u2192",ttype:UNARY,acc:true},{input:"\\overrightarrow",tag:"mover",output:"\u2192",ttype:UNARY,acc:true},{input:"\\overleftarrow",tag:"mover",output:"\u2190",ttype:UNARY,acc:true},{input:"\\hat",tag:"mover",output:"\u005E",ttype:UNARY,acc:true},{input:"\\widehat",tag:"mover",output:"\u0302",ttype:UNARY,acc:true},{input:"\\tilde",tag:"mover",output:"~",ttype:UNARY,acc:true},{input:"\\widetilde",tag:"mover",output:"\u02DC",ttype:UNARY,acc:true},{input:"\\bar",tag:"mover",output:"\u203E",ttype:UNARY,acc:true},{input:"\\overbrace",tag:"mover",output:"\u23B4",ttype:UNARY,acc:true},{input:"\\overline",tag:"mover",output:"\u00AF",ttype:UNARY,acc:true},{input:"\\underbrace",tag:"munder",output:"\u23B5",ttype:UNARY,acc:true},{input:"\\underline",tag:"munder",output:"\u00AF",ttype:UNARY,acc:true},{input:"\\displaystyle",tag:"mstyle",atname:"displaystyle",atval:"true",ttype:UNARY},{input:"\\textstyle",tag:"mstyle",atname:"displaystyle",atval:"false",ttype:UNARY},{input:"\\scriptstyle",tag:"mstyle",atname:"scriptlevel",atval:"1",ttype:UNARY},{input:"\\scriptscriptstyle",tag:"mstyle",atname:"scriptlevel",atval:"2",ttype:UNARY},{input:"\\mathrm",tag:"mtext",output:"text",ttype:TEXT},{input:"\\textrm",tag:"mtext",output:"text",ttype:TEXT},{input:"\\mathbf",tag:"mstyle",atname:"mathvariant",atval:"bold",ttype:UNARY},{input:"\\textbf",tag:"mstyle",atname:"mathvariant",atval:"bold",ttype:UNARY},{input:"\\mathit",tag:"mstyle",atname:"mathvariant",atval:"italic",ttype:UNARY},{input:"\\textit",tag:"mstyle",atname:"mathvariant",atval:"italic",ttype:UNARY},{input:"\\mathtt",tag:"mstyle",atname:"mathvariant",atval:"monospace",ttype:UNARY},{input:"\\texttt",tag:"mstyle",atname:"mathvariant",atval:"monospace",ttype:UNARY},{input:"\\mathsf",tag:"mstyle",atname:"mathvariant",atval:"sans-serif",ttype:UNARY},{input:"\\mathbb",tag:"mstyle",atname:"mathvariant",atval:"double-struck",ttype:UNARY,codes:bbb},{input:"\\mathcal",tag:"mstyle",atname:"mathvariant",atval:"script",ttype:UNARY,codes:cal},{input:"\\mathfrak",tag:"mstyle",atname:"mathvariant",atval:"fraktur",ttype:UNARY,codes:frk}];var names=[];var mathVariant="italic";if(!document.createElementNS){document.createElementNS=function(link,type){return this.createElement(type)}}function compareNames(x,y){if(x.input>y.input){return 1}else{return -1}}function refreshSymbols(){var len=symbols.length;symbols.sort(compareNames);for(var i=0;i<len;i++){names[i]=symbols[i].input}}function strim(str,n){return $.trim(str.slice(n))}function createElementXHTML(elType){return document.createElementNS("http://www.w3.org/1999/xhtml",elType)}function position(str,n){var pos=$.inArray(str,names.slice(n));if(pos<0){var narr=names.concat([str]);narr.sort();pos=$.inArray(str,narr.slice(n))}return n+pos}function getSymbol(str){var k=0;var j=0;var mk;var st;var tagst;var match="";var more=true;var sLen=str.length;for(var i=1;i<=sLen&&more;i++){st=str.slice(0,i);j=k;k=position(st,j);if(k<names.length&&str.slice(0,names[k].length)==names[k]){match=names[k];mk=k;i=match.length}more=k<names.length&&str.slice(0,names[k].length)>=names[k]}if(match!==""){return symbols[mk]}k=1;st=str.slice(0,1);if("0"<=st&&st<="9"){tagst="mn"}else{tagst=(("A">st||st>"Z")&&("a">st||st>"z")?"mo":"mi")}return{input:st,tag:tagst,output:st,ttype:CONST}}function parseSexpr(str){var symbol,node,result,result2,i,st,newFrag=document.createDocumentFragment();var ch,newst,text="";symbol=getSymbol(str);if(symbol===null||symbol.ttype==RIGHTBRACKET){return[null,str,null]}if(symbol.ttype==DEFINITION){str=symbol.output+strim(str,symbol.input.length);symbol=getSymbol(str);if(symbol===null||symbol.ttype==RIGHTBRACKET){return[null,str,null]}}if(symbol.ttype==CONST&&symbol.tag=="mi"&&str!=""){while(symbol.ttype==CONST&&symbol.tag=="mi"&&str!=""){text+=symbol.output;str=strim(str,symbol.input.length);symbol=getSymbol(str)}node=createMmlNode("mi",document.createTextNode(text));node.setAttribute("mathvariant",mathVariant);return[node,str,"mi"]}else{str=strim(str,symbol.input.length)}switch(symbol.ttype){case SPACE:node=createMmlNode(symbol.tag);node.setAttribute(symbol.atname,symbol.atval);return[node,str,symbol.tag];case UNDEROVER:return[createMmlNode(symbol.tag,document.createTextNode(symbol.output)),str,symbol.tag];case CONST:node=createMmlNode(symbol.tag,document.createTextNode(symbol.output));return[node,str,symbol.tag];case STRETCHY:node=createMmlNode(symbol.tag,document.createTextNode(symbol.output));if(symbol.input=="|"||symbol.input=="\\vert"||symbol.input=="\\|"||symbol.input=="\\Vert"){node.setAttribute("lspace","0em");node.setAttribute("rspace","0em")}node.setAttribute("maxsize",symbol.atval);if(symbol.rtag!==null){return[node,str,symbol.rtag]}else{return[node,str,symbol.tag]}break;case BIG:var atval=symbol.atval;symbol=getSymbol(str);if(symbol===null){return[null,str,null]}str=strim(str,symbol.input.length);node=createMmlNode(symbol.tag,document.createTextNode(symbol.output));node.setAttribute("minsize",atval);node.setAttribute("maxsize",atval);return[node,str,symbol.tag];case LEFTBRACKET:if(symbol.input=="\\left"){symbol=getSymbol(str);if(symbol!==null){if(symbol.input=="."){symbol.invisible=true}str=strim(str,symbol.input.length)}}result=parseExpr(str,true,false);if(symbol===null||(typeof symbol.invisible=="boolean"&&symbol.invisible)){node=createMmlNode("mrow",result[0])}else{node=createMmlNode("mo",document.createTextNode(symbol.output));node=createMmlNode("mrow",node);node.appendChild(result[0])}return[node,result[1],result[2]];case MATRIX:if(symbol.input=="\\begin{array}"){var mask="";symbol=getSymbol(str);str=$.trim(str);if(symbol===null){mask="l"}else{str=strim(str,symbol.input.length);if(symbol.input!="{"){mask="l"}else{do{symbol=getSymbol(str);if(symbol!==null){str=strim(str,symbol.input.length);if(symbol.input!="}"){mask=mask+symbol.input}}}while(symbol!==null&&symbol.input!==""&&symbol.input!="}")}}result=parseExpr("{"+str,true,true);node=createMmlNode("mtable",result[0]);mask=mask.replace(/l/g,"left ");mask=mask.replace(/r/g,"right ");mask=mask.replace(/c/g,"center ");node.setAttribute("columnalign",mask);node.setAttribute("displaystyle","false");return[node,result[1],null]}else{result=parseExpr("{"+str,true,true);node=createMmlNode("mtable",result[0]);node.setAttribute("columnalign","right center left");node.setAttribute("displaystyle","true");node=createMmlNode("mrow",node);return[node,result[1],null]}break;case TEXT:if(str.charAt(0)=="{"){i=str.indexOf("}")}else{i=0}if(i==-1){i=str.length}st=str.slice(1,i);node=createMmlNode(symbol.tag,document.createTextNode(st));newFrag.appendChild(node);str=strim(str,i+1);return[createMmlNode("mrow",newFrag),str,null];case UNARY:if(symbol.atname=="mathvariant"){mathVariant=symbol.atval}result=parseSexpr(str);if(result[0]===null){return[createMmlNode(symbol.tag,document.createTextNode(symbol.output)),str]}if(typeof symbol.func=="boolean"&&symbol.func){st=str.charAt(0);if(st=="^"||st=="_"||st==","){return[createMmlNode(symbol.tag,document.createTextNode(symbol.output)),str,symbol.tag]}else{node=createMmlNode("mrow",createMmlNode(symbol.tag,document.createTextNode(symbol.output)));node.appendChild(result[0]);return[node,result[1],symbol.tag]}}if(symbol.input=="\\sqrt"){return[createMmlNode(symbol.tag,result[0]),result[1],symbol.tag]}else{if(typeof symbol.acc=="boolean"&&symbol.acc){node=createMmlNode(symbol.tag,result[0]);var output=symbol.output;var node1=createMmlNode("mo",document.createTextNode(output));if(symbol.input=="\\vec"||symbol.input=="\\check"){node1.setAttribute("maxsize","1.2")}if(symbol.input=="\\underbrace"||symbol.input=="\\underline"){node1.setAttribute("accentunder","true")}else{node1.setAttribute("accent","true")}node.appendChild(node1);if(symbol.input=="\\overbrace"||symbol.input=="\\underbrace"){node.ttype=UNDEROVER}return[node,result[1],symbol.tag]}else{if(typeof symbol.codes!="undefined"){for(i=0;i<result[0].childNodes.length;i++){if(result[0].childNodes[i].nodeName=="mi"||result[0].nodeName=="mi"){st=(result[0].nodeName=="mi"?result[0].firstChild.nodeValue:result[0].childNodes[i].firstChild.nodeValue);newst="";for(var j=0;j<st.length;j++){ch=st.charCodeAt(j);if(ch>64&&ch<91){newst=newst+symbol.codes[ch-65]}else{if(ch>96&&ch<123){newst=newst+symbol.codes[ch-71]}}}if(result[0].nodeName=="mi"){result[0]=createMmlNode("mo").appendChild(document.createTextNode(newst))}else{result[0].replaceChild(createMmlNode("mo").appendChild(document.createTextNode(newst)),result[0].childNodes[i])}}}}node=createMmlNode(symbol.tag,result[0]);node.setAttribute(symbol.atname,symbol.atval);if(symbol.input=="\\scriptstyle"||symbol.input=="\\scriptscriptstyle"){node.setAttribute("displaystyle","false")}return[node,result[1],symbol.tag]}}break;case BINARY:result=parseSexpr(str);if(result[0]===null){return[createMmlNode("mo",document.createTextNode(symbol.input)),str,null]}result2=parseSexpr(result[1]);if(result2[0]===null){return[createMmlNode("mo",document.createTextNode(symbol.input)),str,null]}if(symbol.input=="\\root"||symbol.input=="\\stackrel"){newFrag.appendChild(result2[0])}newFrag.appendChild(result[0]);if(symbol.input=="\\frac"||symbol.input=="\\bfrac"){newFrag.appendChild(result2[0])}node=createMmlNode(symbol.tag,newFrag);if(symbol.input=="\\bfrac"){node.setAttribute("bevelled","true")}return[node,result2[1],symbol.tag];case INFIX:str=strim(str,symbol.input.length);return[createMmlNode("mo",document.createTextNode(symbol.output)),str,symbol.tag];default:return[createMmlNode(symbol.tag,document.createTextNode(symbol.output)),str,symbol.tag]}}function parseIexpr(str){var symbol,sym1,sym2,node,result,tag,underover;sym1=getSymbol(str);result=parseSexpr(str);node=result[0];str=result[1];tag=result[2];symbol=getSymbol(str);if(symbol.ttype==INFIX){str=strim(str,symbol.input.length);result=parseSexpr(str);if(result[0]===null){result[0]=createMmlNode("mo",document.createTextNode("\u25A1"))}str=result[1];tag=result[2];if(symbol.input=="_"||symbol.input=="^"){sym2=getSymbol(str);tag=null;underover=((sym1.ttype==UNDEROVER)||(node.ttype==UNDEROVER));if((symbol.input=="_"&&sym2.input=="^")||(symbol.input=="^"&&sym2.input=="_")){str=strim(str,sym2.input.length);var res2=parseSexpr(str);str=res2[1];tag=res2[2];node=createMmlNode((underover?"munderover":"msubsup"),node);if(symbol.input=="_"){node.appendChild(result[0]);node.appendChild(res2[0])}else{node.appendChild(res2[0]);node.appendChild(result[0])}}else{if(symbol.input=="_"){node=createMmlNode((underover?"munder":"msub"),node);node.appendChild(result[0])}else{node=createMmlNode((underover?"mover":"msup"),node);node.appendChild(result[0])}}node=createMmlNode("mrow",node)}else{node=createMmlNode(symbol.tag,node);if(symbol.input=="\\atop"||symbol.input=="\\choose"){node.setAttribute("linethickness","0ex")}node.appendChild(result[0]);if(symbol.input=="\\choose"){node=createMmlNode("mfenced",node)}}}return[node,str,tag]}function parseExpr(str,rightbracket,matrix){var symbol,node,result,i,tag,newFrag=document.createDocumentFragment();do{str=$.trim(str);result=parseIexpr(str);node=result[0];str=result[1];tag=result[2];symbol=getSymbol(str);if(node){if((tag=="mn"||tag=="mi")&&symbol!==null&&typeof symbol.func=="boolean"&&symbol.func){var space=createMmlNode("mspace");space.setAttribute("width","0.167em");node=createMmlNode("mrow",node);node.appendChild(space)}if(tag=="mstyle"){mathVariant="italic"}newFrag.appendChild(node)}}while((symbol.ttype!=RIGHTBRACKET)&&symbol!==null&&symbol.output!=="");tag=null;if(symbol.ttype==RIGHTBRACKET){if(symbol.input=="\\right"){str=strim(str,symbol.input.length);symbol=getSymbol(str);if(symbol!==null&&symbol.input=="."){symbol.invisible=true}if(symbol!==null){tag=symbol.rtag}}if(symbol!==null){str=strim(str,symbol.input.length)}var len=newFrag.childNodes.length;if(matrix&&len>0&&newFrag.childNodes[len-1].nodeName=="mrow"){var pos=[];var m=newFrag.childNodes.length;for(i=0;matrix&&i<m;i=i+2){pos[i]=[];node=newFrag.childNodes[i];for(var j=0;j<node.childNodes.length;j++){if(node.childNodes[j].firstChild&&node.childNodes[j].firstChild.nodeValue=="&"){pos[i][pos[i].length]=j}}}var row,frag,n,k,table=document.createDocumentFragment();for(i=0;i<m;i=i+2){row=document.createDocumentFragment();frag=document.createDocumentFragment();node=newFrag.firstChild;n=node.childNodes.length;k=0;for(j=0;j<n;j++){if(typeof pos[i][k]!="undefined"&&j==pos[i][k]){node.removeChild(node.firstChild);row.appendChild(createMmlNode("mtd",frag));k++}else{frag.appendChild(node.firstChild)}}row.appendChild(createMmlNode("mtd",frag));if(newFrag.childNodes.length>2){newFrag.removeChild(newFrag.firstChild);newFrag.removeChild(newFrag.firstChild)}table.appendChild(createMmlNode("mtr",row))}return[table,str]}if(typeof symbol.invisible!="boolean"||!symbol.invisible){node=createMmlNode("mo",document.createTextNode(symbol.output));newFrag.appendChild(node)}}return[newFrag,str,tag]}function createMmlNode(t,frag){var node=document.createElementNS("http://www.w3.org/1998/Math/MathML",t);if(frag){$(node).append(frag)}return node}var SVG,canvas;var collection=[];function createSVGElement(elType){return document.createElementNS("http://www.w3.org/2000/svg",elType)}function getSVGElement(id,el){var res={node:null,newEl:false};if(id){id=SVG.id+"_"+id;res.node=$("#"+id)[0]}if(!res.node){res.node=createSVGElement(el);if(id){res.node.id=id}res.newEl=true}return res}function openGroup(id,clear){var newEl=getSVGElement(id,"g");appendSVG(newEl);canvas=$("#"+SVG.id+"_"+id)[0];if(clear){$(canvas).empty()}}function closeGroup(){canvas=$("#"+SVG.id+"_Canvas")[0]}function appendSVG(elmt){if(elmt.newEl){$(canvas).append(elmt.node)}}function addButton(parent,text,title,func,id){var node=createElementXHTML("span");node.className="svgButton";node.title=title;node.onclick=func;if(id){node.id=id}$(node).append(text);$(node).css({paddingRight:"0.5em",paddingLeft:"0.5em",fontSize:"1em",fontFamily:"monospace",background:"blue",color:"yellow",cursor:"pointer"});$(node).mouseover(function(){$(this).css({background:"yellow",color:"blue"})});$(node).mouseout(function(){$(this).css({background:"blue",color:"yellow"})});$(parent).append(node);return parent}function pictureAttributes(){this.id=null;this.stroke="blue";this.strokewidth=1;this.strokeopacity=1;this.strokedasharray="none";this.fill="none";this.fillopacity=1;this.fixed=false;this.fontstyle="normal";this.fontfamily="serif";this.fontweight="normal";this.fontsize=12;this.fontstroke="none";this.fontstrokewidth=1;this.fontstrokeopacity=1;this.fontstrokedasharray="none";this.fontfill="black";this.fontfillopacity=1;this.sector=false;this.largearc=0;this.marker="o";this.orient="auto";this.size=8;this.units="userSpaceOnUse";this.markerstroke="blue";this.markerstrokewidth=1;this.markerstrokeopacity=1;this.markerstrokedasharray="none";this.markerfill="none";this.markerfillopacity=1;this.sweep=0;this.rx=0;this.ry=0;this.closed=false;this.curve="";this.direction=[1,0];this.ticklabels="";this.pos="";this.points=200;this.backgroundcolor="none";this.backgroundopacity=1}function pictureObject(){this.id=null;this.src="";this.width=320;this.height=null;this.factor=1;this.xmin=-5;this.xmax=5;this.ymin=null;this.ymax=null;this.xunitlength=null;this.yunitlength=null;this.origin=[0,0];this.mouse=[null,null];this.coords="cartesian";this.drag=null;this.pan=true;this.locked=false;this.attr=new pictureAttributes()}function drawPicture(){$(canvas).empty();$("#"+SVG.id+" .svgMarker").remove();SVG.attr=new pictureAttributes();try{this.code=function(){with(Math){eval(SVG.src)}}();this.code=null}catch(err){var errstr;if(typeof err=="object"){errstr=err.name+" "+err.message+" "+err.number+" "+err.description}else{errstr=err}alert(errstr+"\n"+SVG.src)}collection[SVG.id]=SVG}function setOptions(atr){for(var i in atr){SVG.attr[i]=atr[i]}}function getOptions(attr,options,prefix){var pref=prefix||"";if(typeof attr=="string"){return(options[pref+attr]==undefined?SVG.attr[pref+attr]:options[pref+attr])}else{var i,newAttr={},len=attr.length,item;for(i=0;i<len;i++){item=attr[i];newAttr[item]=options[pref+item]==undefined?SVG.attr[pref+item]:options[pref+item]}return newAttr}}function setAction(evt,fn,id){if(!$.isFunction(fn)){return}var node=id?$("#"+SVG.id+"_"+id):$("#"+SVG.id);$(node).bind(evt,fn)}function getAngle(p){p=p||[0,0];var res=Math.atan2(SVG.mouse[1]-p[1],SVG.mouse[0]-p[0]);res=(res<0)?res+2*Math.PI:res;return res}function getDistance(p){p=p||[0,0];return Math.sqrt(Math.pow(SVG.mouse[0]-p[0],2)+Math.pow(SVG.mouse[1]-p[1],2))}function updateButton(){var obj=$("#SVGtoolbar #SVGupdateButton");if(obj.text()=="Edit"){obj.text("Update");obj.attr("title","Update picture");$("#SVGsrc").val(SVG.src).css("display","block")}else{SVG.src=$("#SVGsrc").val();drawPicture()}}function closeEditor(){$("#SVGtoolbar").slideUp();$("#SVGsrc").val("");SVG.locked=false}function switchTo(evt){var name=evt.currentTarget.id;if(SVG.id==name||SVG.locked){return false}SVG=collection[name];canvas=$("#"+SVG.id+"_Canvas")[0];return false}function onWheel(evt){if(SVG.locked){return false}evt=evt||window.event;var factor=1;evt.preventDefault();evt.stopPropagation();if(evt.wheelDelta){factor=(evt.wheelDelta>0)?0.8:1.25}else{if(evt.detail){factor=(evt.detail<0)?0.8:1.25}}if(evt.altKey){resize(factor)}else{zoom(factor)}return false}function onClick(evt){if(SVG.locked){return false}if(evt.button===0){if(evt.shiftKey){$("#SVGtoolbar #SVGupdateButton").text("Update");$("#SVGsrc").val(SVG.src);$("#SVGtoolbar").css({top:evt.pageY,left:evt.pageX}).slideDown();SVG.locked=true;evt.stopImmediatePropagation()}else{if(SVG.pan){SVG.drag=[evt.clientX,evt.clientY];document.body.style.cursor="move"}}}return false}function onDrop(evt){if(SVG.drag==null){return false}document.body.style.cursor="default";var xlen=(SVG.drag[0]-evt.clientX)/SVG.xunitlength;var ylen=(-SVG.drag[1]+evt.clientY)/SVG.yunitlength;SVG.drag=null;if(xlen!=0||ylen!=0){setScales([SVG.xmin+xlen,SVG.xmax+xlen,SVG.ymin+ylen,SVG.ymax+ylen])}return false}function setScales(scales){if(scales){SVG.xmin=scales[0];SVG.xmax=scales[1];SVG.ymin=scales[2];SVG.ymax=scales[3]}SVG.xunitlength=SVG.width/(SVG.xmax-SVG.xmin);SVG.yunitlength=SVG.height/(SVG.ymax-SVG.ymin);SVG.origin=[-SVG.xmin*SVG.xunitlength,-SVG.ymin*SVG.yunitlength];drawPicture()}function getScales(scales){scales=scales||[];var res=[null,null,null,null,0];if(scales.length==0){res[0]=SVG.xmin;res[1]=SVG.xmax}if(scales.length>1){if(typeof scales[0]=="number"&&typeof scales[1]=="number"&&scales[1]>scales[0]){res[0]=scales[0];res[1]=scales[1];res[4]=4}else{res[0]=SVG.xmin;res[1]=SVG.xmax}}if(scales.length==4){if(typeof scales[2]=="number"&&typeof scales[3]=="number"&&scales[3]>scales[2]){res[2]=scales[2];res[3]=scales[3];res[4]+=8}}return res}function resize(factor){SVG.factor=(SVG.factor*factor).toFixed(3);SVG.width/=factor;SVG.height/=factor;var picture=$("#"+SVG.id);picture.attr("width",SVG.width);picture.attr("height",SVG.height);var parent=picture[0].parentNode;if(parent.nodeName=="DIV"){parent.style.width=SVG.width+"px";parent.style.height=SVG.height+"px"}setScales()}function zoom(factor,center){var px,py;if(center){px=(SVG.xmax+SVG.xmin)*0.5;py=(SVG.ymax+SVG.ymin)*0.5}else{px=SVG.mouse[0];py=SVG.mouse[1]}SVG.factor=(SVG.factor*factor).toFixed(3);var dx=(SVG.xmax-SVG.xmin)*factor;var dy=(SVG.ymax-SVG.ymin)*factor;var xmin=(1-factor)*px+factor*SVG.xmin;var ymin=(1-factor)*py+factor*SVG.ymin;setScales([xmin,xmin+dx,ymin,ymin+dy])}function updateCartesianCoord(){if(!SVG.locked){$("#"+SVG.id+"_Coords").text("("+SVG.mouse[0].toFixed(2)+", "+SVG.mouse[1].toFixed(2)+")")}return false}function updatePolarCoord(){if(!SVG.locked){$("#"+SVG.id+"_Coords").text("("+getDistance().toFixed(2)+", "+getAngle().toFixed(2)+")")}return false}function getPosition(evt){var a=[null,null];var off=$(evt.currentTarget.parentNode).offset();a[0]=(evt.pageX-off.left-SVG.origin[0])/SVG.xunitlength;a[1]=(SVG.height-SVG.origin[1]-evt.pageY+off.top)/SVG.yunitlength;return a}function updatePosition(evt){SVG.mouse=getPosition(evt);return false}function removeCoord(){$("#"+SVG.id+"_Coords").text("");return false}function tracker(pos,options){options=options||{};var coords=options.coords||SVG.coords;var func=(coords=="polar")?updatePolarCoord:updateCartesianCoord;options.id="Coords";options.fixed=true;text(pos,"",options);setAction("mousemove",func);setAction("mouseout",removeCoord)}function exportSVG(){var svg="<?xml version='1.0' encoding='UTF-8' standalone='no'?>\n";svg+=$("#"+SVG.id).parent().html();svg=svg.replace(/&nbsp;/g,"");svg=svg.replace(/><(?!\/)/g,">\n<");$("#SVGtoolbar #SVGupdateButton").text("Edit").attr("title","Edit script");$("#SVGsrc").val(svg).css("display","block")}function toSVG(p){var x=p[0]*SVG.xunitlength+SVG.origin[0];var y=SVG.height-p[1]*SVG.yunitlength-SVG.origin[1];return[x,y]}function toSVGPair(p){var q=toSVG(p);return q[0]+" "+q[1]}function setStrokeAndFill(node,options,prefix){var attributes=["stroke","strokewidth","strokedasharray","strokeopacity","fill","fillopacity"];var attr=getOptions(attributes,options,prefix);var elem=$(node);elem.attr("stroke",attr.stroke);elem.attr("stroke-width",attr.strokewidth/SVG.factor);elem.attr("stroke-dasharray",attr.strokedasharray);elem.attr("stroke-opacity",attr.strokeopacity);elem.attr("fill",attr.fill);elem.attr("fill-opacity",attr.fillopacity)}function button(p,q,txt,action,options){options=options||{};options.id=(options.id||Math.randomString(8));rect(p,q,options);setAction("click",action,options.id);options.fill=null;options.fillopacity=1;options.id+="_t";text([(p[0]+q[0])*0.5,(p[1]+q[1])*0.5],txt,options);setAction("click",action,options.id)}function setMarkers(obj,options){var markerChars="o*sSx+<>|";var attributes=["marker","size","units","orient","markerstroke","markerstrokewidth","markerstrokeopacity"];var attr=getOptions(attributes,options);var node,node2,i,id,pos=["marker-start","marker-mid","marker-end"];var lim=attr.marker.length;for(i=0;i<lim;i++){var type=attr.marker.charAt(i);if(type=="-"||markerChars.indexOf(type)<0){continue}id=(options.id||Math.randomString(8))+"Marker_"+markerChars.indexOf(type);node=$("#"+SVG.id+"_"+id);if(node.length===0){node=$(getSVGElement(id,"marker").node);node.attr("class","svgMarker");node.attr("viewBox","0 0 10 10");node.attr("refX",5);node.attr("refY",5);node.attr("orient",attr.orient);node.attr("markerUnits",attr.units);switch(type){case"*":case"o":node2=$(createSVGElement("circle"));node2.attr("cx",5);node2.attr("cy",5);node2.attr("r",4);break;case">":node2=$(createSVGElement("path"));node2.attr("d","M0 0 L10 5 L0 10 z");node.attr("refX",10);break;case"<":node2=$(createSVGElement("path"));node2.attr("d","M10 0 L10 10 L0 5 z");node.attr("refX",0);break;case"x":node2=$(createSVGElement("path"));node2.attr("d","M0 0 L10 10 M0 10 L10 0");break;case"+":node2=$(createSVGElement("path"));node2.attr("d","M5 0 L5 10 M0 5 L10 5");break;case"|":node2=$(createSVGElement("path"));node2.attr("d","M5 0 L5 10");break;case"S":case"s":node2=$(createSVGElement("rect"));node2.attr("x",0);node2.attr("y",0);node2.attr("width",10);node2.attr("height",10)}setStrokeAndFill(node2,options,"marker");node2.attr("stroke-width",attr.markerstrokewidth);if("*<>S".indexOf(type)>-1){node2.attr("fill",attr.markerstroke);node2.attr("fill-opacity",attr.markerstrokeopacity)}node.append(node2);$("#"+SVG.id+"_Defs").append(node)}node.attr("markerWidth",attr.size/SVG.factor);node.attr("markerHeight",attr.size/SVG.factor);$(obj).attr(pos[i],"url(#"+SVG.id+"_"+id+")")}}function setLabels(p,options){var i,point=[0,0],pos;var label=(typeof options.label=="string")?[options.label]:options.label;var labelpos=getOptions("pos",options);labelpos=(typeof labelpos=="string")?[labelpos]:labelpos;var poslen=labelpos.length;var size=options.size||SVG.attr.size;var dx=(0.5*size/SVG.xunitlength)/SVG.factor;var dy=(0.5*size/SVG.yunitlength)/SVG.factor;for(i=0;i<label.length;i++){options.isLabel="_label"+i;point[0]=p[i][0];point[1]=p[i][1];pos=(poslen>i)?labelpos[i].toUpperCase():pos;if(/E/.test(pos)){point[0]+=dx}if(/W/.test(pos)){point[0]-=dx}if(/N/.test(pos)){point[1]+=dy}if(/S/.test(pos)){point[1]-=dy}options.pos=pos;text(point,label[i],options)}}function line(p,q,options){options=options||{};options.closed=false;options.curve="";path([p,q],options)}function dot(p,options){options=options||{};var direction=getOptions("direction",options);var q=[p[0]+direction[0]/SVG.xunitlength,p[1]+direction[1]/SVG.yunitlength];var st="M"+toSVGPair(p)+" "+toSVGPair(q);var elmt=getSVGElement(options.id,"path");var elem=$(elmt.node);elem.attr("d",st);elem.attr("stroke","none");setMarkers(elem,options);appendSVG(elmt);if(options.label){setLabels([p],options)}}function path(list,options,append){options=options||{};var i,elmt=getSVGElement(options.id,"path");var attr=getOptions(["curve","closed"],options);var len=list.length;if(len>0){var node=$(elmt.node);var st=(append&&!elmt.newEl)?elmt.node.getAttribute("d"):"";st+="M"+toSVGPair(list[0])+" "+attr.curve;for(i=1;i<len;i++){st+=toSVGPair(list[i])+" "}if(attr.closed){st+="Z"}node.attr("d",st);setStrokeAndFill(node,options);if(options.marker){setMarkers(node,options)}appendSVG(elmt);if(options.label){setLabels(list,options)}}}function rotate(id,angle,options){if(!id||!angle){return}var node=$("#"+SVG.id+"_"+id)[0];if(node){options=options||{};var center=options.center?toSVG(options.center):SVG.origin;angle=-angle*180/Math.PI;var transform=node.getAttribute("transform")||"";transform="rotate("+angle+" "+center+") "+(options.replace?"":transform);$(node).attr("transform",transform)}}function translate(id,delta,options){if(!id||!delta){return}var node=$("#"+SVG.id+"_"+id)[0];if(node){options=options||{};delta=toSVG(delta);var transform=node.getAttribute("transform")||"";transform="translate("+(delta[0]-SVG.origin[0])+"  "+(SVG.origin[1]+delta[1]-SVG.height)+") "+(options.replace?"":transform);$(node).attr("transform",transform)}}function curve(list,options){options=options||{};options.curve=options.curve||"T";path(list,options)}function circle(center,radius,options){ellipse(center,radius,radius,options)}function loop(p,options){options=options||{};var d=options.direction||[1,0];options.curve="C";options.closed=false;path([p,[p[0]+d[0],p[1]+d[1]],[p[0]-d[1],p[1]+d[0]],p],options)}function arc(options){options=options||{};var start=options.start;var end=options.end;var center=options.center;var startangle=options.startangle;var endangle=options.endangle;var st="M",elmt=getSVGElement(options.id,"path");var attr=getOptions(["largearc","sweep","closed","sector"],options);var radius=options.radius;if(center!=null&&startangle!=null&&endangle!=null&&radius!=null){start=[radius*Math.cos(startangle)+center[0],radius*Math.sin(startangle)+center[1]];end=[radius*Math.cos(endangle)+center[0],radius*Math.sin(endangle)+center[1]]}if(start==null||end==null){return}if(!radius){var v=[end[0]-start[0],end[1]-start[1]];radius=Math.sqrt(v[0]*v[0]+v[1]*v[1])}if(attr.sector){st+=toSVGPair(center)+" "}st+=toSVGPair(start)+" A"+radius*SVG.xunitlength+","+radius*SVG.yunitlength+" 0 "+attr.largearc+","+attr.sweep+" "+toSVGPair(end);if(attr.sector||attr.closed){st+=" z"}var node=$(elmt.node);node.attr("d",st);setStrokeAndFill(node,options);if(options.marker){setMarkers(node,options)}appendSVG(elmt);if(options.label){setLabels([start,end],options)}}function sector(options){if(!options.center||!options.startangle||!options.endangle||!options.radius){return}options.sector=true;arc(options)}function ellipse(center,rx,ry,options){options=options||{};var elmt=getSVGElement(options.id,"ellipse");center=toSVG(center);var node=$(elmt.node);node.attr("cx",center[0]);node.attr("cy",center[1]);node.attr("rx",rx*SVG.xunitlength);node.attr("ry",ry*SVG.yunitlength);setStrokeAndFill(node,options);appendSVG(elmt)}function polygon(list,options){options=options||{};options.closed=true;path(list,options)}function rect(p,q,options){options=options||{};var elmt=getSVGElement(options.id,"rect");var attr=getOptions(["rx","ry"],options);var node=$(elmt.node);node.attr("x",toSVG(p)[0]);node.attr("y",toSVG(q)[1]);node.attr("width",(q[0]-p[0])*SVG.xunitlength);node.attr("height",(q[1]-p[1])*SVG.yunitlength);node.attr("rx",attr.rx*SVG.xunitlength);node.attr("ry",attr.ry*SVG.yunitlength);setStrokeAndFill(node,options);appendSVG(elmt)}function text(p,st,options){options=options||{};var id=options.id;var attr=getOptions(["fontstyle","fontfamily","fontweight","fontfill","fontsize","fixed","pos"],options);if(id&&options.isLabel){id+=options.isLabel}var pos=attr.pos.toUpperCase();if(!attr.fixed){attr.fontsize/=SVG.factor}var elem,node,dx,dy,latex=false,str=$.trim(st.toString()),q=toSVG(p);if(str.charAt(0)=="$"){str=str.substr(1,str.length-2);latex=true}if(latex){if(p[0]>SVG.xmax||p[0]<SVG.xmin||p[1]>SVG.ymax||p[1]<SVG.ymin){return}node=createElementXHTML("div");node.style.position="absolute";node.style.left="-1000px";node.style.top="-1000px";$("body").append(node);var math=MSVG.parseMath(str,true,attr.fontsize+"px",attr.fontfill);var mathNode=$(node);mathNode.append($(math).clone());dx=-node.offsetWidth/2;dy=-node.offsetHeight/2;if(/N/.test(pos)){dy=-node.offsetHeight}if(/S/.test(pos)){dy=0}if(/E/.test(pos)){dx=0}if(/W/.test(pos)){dx=-node.offsetWidth}var width=mathNode.width(),height=mathNode.height();mathNode.remove();q[0]+=dx;q[1]+=dy;var elmt=getSVGElement(id,"foreignObject");elem=$(elmt.node);elem.empty().append(math);elem.attr("width",width);elem.attr("height",height)}else{var baseline="middle",textanchor="middle";if(/E/.test(pos)){textanchor="start"}if(/W/.test(pos)){textanchor="end"}if(/N/.test(pos)){baseline="text-after-edge"}if(/S/.test(pos)){baseline="text-before-edge"}var elmt=getSVGElement(id,"text");elem=$(elmt.node);elem.empty().text(str);elem.attr("font-style",attr.fontstyle);elem.attr("font-family",attr.fontfamily);elem.attr("font-weight",attr.fontweight);elem.attr("font-size",attr.fontsize);elem.attr("text-anchor",textanchor);elem.attr("dominant-baseline",baseline);setStrokeAndFill(elem,options,"font")}elem.attr("x",q[0]);elem.attr("y",q[1]);appendSVG(elmt)}function image(url,options){options=options||{};var elmt=getSVGElement(options.id,"image");var elem=$(elmt.node);var height=options.height?options.height/SVG.factor:SVG.height;var width=options.width?options.width/SVG.factor:SVG.width;var origin=toSVG(options.origin||[SVG.xmin,SVG.ymin]);var pos=(options.pos||"").toUpperCase();var x=origin[0]-width*0.5;var y=origin[1]-height*0.5;if(/N/.test(pos)){y-=height*0.5}if(/S/.test(pos)){y+=height*0.5}if(/E/.test(pos)){x+=width*0.5}if(/W/.test(pos)){x-=width*0.5}elem.attr("x",x);elem.attr("y",y);elem.attr("width",width);elem.attr("height",height);elem.attr("preserveAspectRatio","none");elmt.node.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",url);appendSVG(elmt)}function grid(options){options=options||{};var dx,dy,x,y,k;var orig=options.origin||[0,0];var id=options.id||"Grid";options.stroke=options.stroke||"grey";options.strokewidth=(options.strokewidth||SVG.attr.strokewidth*0.5);var coords=options.coords||SVG.coords;var lim=getScales(options.scales);openGroup(id,true);lim[2]=(typeof lim[2]=="number")?lim[2]:SVG.ymin;lim[3]=(typeof lim[3]=="number")?lim[3]:SVG.ymax;if(coords=="polar"){dx=options.dx||1;dy=options.dy||3;var limit=Math.max(Math.abs(lim[0]),Math.abs(lim[1]),Math.abs(lim[2]),Math.abs(lim[3]));for(x=dx;x<limit;x+=dx){circle(orig,x,options)}if(dy>1){for(y=1;y<dy;y++){k=Math.tan(y*Math.PI/(2*dy));line([lim[0],(lim[0]-orig[0])*k+orig[1]],[SVG.xmax,(lim[1]-orig[0])*k+orig[1]],options);line([lim[0],-(lim[0]-orig[0])*k+orig[1]],[SVG.xmax,-(lim[1]-orig[0])*k+orig[1]],options)}}}else{dx=options.dx||1;dy=options.dy||dx;for(x=orig[0];x<SVG.xmax;x+=dx){if(x>lim[0]&&x<lim[1]){line([x,lim[2]],[x,lim[3]],options)}}for(x=orig[0]-dx;x>SVG.xmin;x-=dx){if(x>lim[0]&&x<lim[1]){line([x,lim[2]],[x,lim[3]],options)}}for(y=orig[1];y<SVG.ymax;y+=dy){if(y>lim[2]&&y<lim[3]){line([lim[0],y],[lim[1],y],options)}}for(y=orig[1]-dy;y>SVG.ymin;y-=dy){if(y>lim[2]&&y<lim[3]){line([lim[0],y],[lim[1],y],options)}}}closeGroup()}function axes(options){options=options||{};options.marker="-|"+(options.marker?options.marker.charAt(0):"-");var i,x,y,start,stop,label;var dx=options.dx||1;var dy=options.dy||dx;var id=options.id||"Axes";var fontsize=getOptions("fontsize",options);var coords=options.coords||SVG.coords;var orig=(coords=="polar")?[0,0]:(options.origin||[0,0]);var ddx=options.decx||Math.max(0,-Math.floor(Math.log(dx)/Math.log(10)));var ddy=options.decy||Math.max(0,-Math.floor(Math.log(dy)/Math.log(10)));options.stroke=options.stroke||"black";options.strokewidth=(options.strokewidth||SVG.attr.strokewidth*0.5);options.markerstroke=options.stroke;options.markerstrokewidth=options.strokewidth;openGroup(id,true);var lim=getScales(options.scales);lim[2]=lim[2]||SVG.ymin;lim[3]=lim[3]||SVG.ymax;if($.isArray(options.xticks)){var xticks=options.xticks.sort();var list2=[[lim[0],orig[1]]];label=[""];for(i=0;i<xticks.length;i++){list2.push([xticks[i],orig[1]]);label.push(String(xticks[i].toFixed(ddx)))}list2.push([lim[1],orig[1]]);label.push("")}else{var list1=[],label1=[];var list2=[],label2=[];start=SVG.xmin+0.25*dx;stop=SVG.xmax-0.25*dx;i=1;var cand,leftExit=0,rightExit=0;while(leftExit*rightExit==0){cand=orig[0]+i*dx;if(cand>start){if(cand<stop){list1.push([cand,orig[1]]);label1.push(String(cand.toFixed(ddx)))}else{rightExit=1}}cand=orig[0]-i*dx;if(cand<stop){if(cand>start){list2.push([cand,orig[1]]);label=(coords=="polar")?"":cand.toFixed(ddx);label2.push(String(label))}else{leftExit=1}}i++}list1.push([lim[1],orig[1]]);label1.push("");list2.push([lim[0],orig[1]]);label2.push("");list2.reverse();list2=list2.concat(list1);label2.reverse();label=label2.concat(label1)}if(options.ticklabels!=false){options.label=label;options.pos="S"}path(list2,options);if($.isArray(options.yticks)){var yticks=options.yticks.sort();var list2=[[orig[0],lim[2]]];label=[""];for(i=0;i<yticks.length;i++){list2.push([orig[0],yticks[i]]);label.push(String(yticks[i].toFixed(ddy)))}list2.push([orig[0],lim[3]]);label.push("")}else{list1=[],label1=[];list2=[];label2=[];start=SVG.ymin+0.25*dy;stop=SVG.ymax-0.25*dy;i=1;leftExit=0;rightExit=0;while(leftExit*rightExit==0){cand=orig[1]+i*dy;if(cand>start){if(cand<stop){list1.push([orig[0],cand]);label1.push(String(cand.toFixed(ddy)))}else{rightExit=1}}cand=orig[1]-i*dy;if(cand<stop){if(cand>start){list2.push([orig[0],cand]);label=(coords=="polar")?"":cand.toFixed(ddy);label2.push(String(label))}else{leftExit=1}}i++}list1.push([orig[0],lim[3]]);label1.push("");list2.push([orig[0],lim[2]]);label2.push("");list2.reverse();list2=list2.concat(list1);label2.reverse();label=label2.concat(label1)}if(options.ticklabels!=false){options.label=label;options.pos="W"}options.stroke=options.markerstroke;path(list2,options);closeGroup()}function list(fun,tmin,tmax,options){var inc=(tmax-tmin)/getOptions("points",options);if(inc<=0||fun.length==0){return}var t,pth,g=[],xt,yt;for(t=1;t>=0;t--){if($.isFunction(fun[t])){g[t]=fun[t]}else{if(typeof fun[t]=="string"){with(Math){eval("g["+t+"] = function(x){return "+fun[t]+"}")}}else{return}}}if(g.length<2){return}pth=[];for(t=tmin;t<=tmax;t+=inc){xt=g[0](t);yt=g[1](t);if(isFinite(xt)&&isFinite(yt)){pth[pth.length]=[xt,yt]}}return pth}function plot(fun,options){options=options||{};var append,pth,steps=options.steps||[];var n_steps=steps.length;options.closed=false;options.curve="";var xmin=(options.min==null)?SVG.xmin:Math.max(SVG.xmin,options.min);var xmax=(options.max==null)?SVG.xmax:Math.min(SVG.xmax,options.max);if(n_steps===0){pth=list(["x",fun],xmin,xmax,options);if(pth){path(pth,options)}}else{options.id=options.id||Math.randomString(6);steps.sort();var steps_a=[];steps_a.push(xmin);for(i=0;i<n_steps;i++){if(steps[i]>xmin&&steps[i]<xmax){steps_a.push(steps[i])}}steps_a.push(xmax);n_steps=steps_a.length-1;for(i=0;i<n_steps;i++){xmax=steps_a[i+1];xmin=steps_a[i];pth=list(["x",fun],xmin,xmax,options);append=(i>0);if(pth){path(pth,options,append)}}}}function area(fun1,fun2,options){options=options||{};options.curve="";options.closed=true;var xmin=(options.min==null)?SVG.xmin:options.min;var xmax=(options.max==null)?SVG.xmax:options.max;var pth1=list(["x",fun1],xmin,xmax,options);var pth2=list(["x",fun2],xmin,xmax,options);if(pth1&&pth2){pth1=pth1.concat(pth2.reverse());path(pth1,options)}}function polarPlot(fun,options){var g1,g2;if(typeof fun=="string"){with(Math){eval("g1 = function(x){return ("+fun+")*cos(x)}");eval("g2 = function(x){return ("+fun+")*sin(x)}")}}else{if($.isFunction(fun)){with(Math){eval("g1 = function(x){return fun(x)*cos(x)}");eval("g2 = function(x){return fun(x)*sin(x)}")}}}parametricPlot(g1,g2,options)}function parametricPlot(fun1,fun2,options){options=options||{};options.closed=false;options.curve="";var xmin=(options.min==null)?0:options.min;var xmax=(options.max==null)?2*Math.PI:options.max;var pth=list([fun1,fun2],xmin,xmax,options);if(pth){path(pth,options)}}function slopeField(fun,options){options=options||{};var g=fun;if(typeof fun=="string"){with(Math){eval("g = function(x,y){return "+fun+"}")}}var gxy,x,y,u,v,dz;var dx=(options.dx==null)?1:options.dx;var dy=(options.dy==null)?1:options.dy;dz=Math.sqrt(dx*dx+dy*dy)/6;var xmin=Math.ceil(SVG.xmin/dx);var ymin=Math.ceil(SVG.ymin/dy);for(x=xmin;x<=SVG.xmax;x+=dx){for(y=ymin;y<=SVG.ymax;y+=dy){gxy=g(x,y);if(!isNaN(gxy)){if(Math.abs(gxy)=="Infinity"){u=0;v=dz}else{u=dz/Math.sqrt(1+gxy*gxy);v=gxy*u}line([x-u,y-v],[x+u,y+v],options)}}}}return{showFormulaOnMouseOver:false,latexImages:false,latexConverter:"http://chart.apis.google.com/chart?cht=tx&chs=1x0&chf=bg,s,FFFFFF00&chco=000000&chl=",mathColor:"",mathFontSize:"",mathFontFamily:"",define:function(oldstr,newstr){if(MSVG.latexImages){return}if((typeof oldstr)=="string"){oldstr=[oldstr];newstr=[newstr]}var i,len=oldstr.length;if(len!=newstr.length){return}for(i=0;i<len;i++){symbols=symbols.concat([{input:"\\"+oldstr[i],tag:"mo",output:newstr[i],ttype:DEFINITION}])}refreshSymbols()},parseMath:function(str,displaystyle,size,color){if(str===null){return null}str=str.replace(/_([^\{])/gm,"_{$1}");str=str.replace(/\^([^\{])/gm,"^{$1}");var frag=parseExpr(str.replace(/^\s+/g,""),false,false)[0];var node=createMmlNode("mstyle",frag);$(node).attr({displaystyle:displaystyle,mathcolor:color||MSVG.mathColor,mathsize:size||MSVG.mathFontSize,fontfamily:MSVG.mathFontFamily});node=createMmlNode("math",node);if(MSVG.showFormulaOnMouseOver){$(node).attr({title:str.replace(/\s+/g," ")})}return node},parseMathExternal:function(str,displaystyle,size,color){if(str===null){return null}var node=createElementXHTML("img");var snip=MSVG.latexConverter+str;$(node).attr({src:snip});if(MSVG.showFormulaOnMouseOver){$(node).attr({title:str.replace(/\s+/g," ")})}return node},generic:function(){if(!$.browser.mozilla){MSVG.latexImages=true}if(MSVG.latexImages){MSVG.parseMath=MSVG.parseMathExternal}else{refreshSymbols()}if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")){MSVG.initPictures=MSVG.removePictures}},removePictures:function(obj){var pictures=obj?$(obj):$(".SVGgraph");$(pictures).each(function(){var that=$(this);this.id=null;that.empty();that.css({color:"red",background:"yellow"});that.text("Missing picture: your  browser does not support inline SVG");window.setTimeout(function(){that.remove()},10000)})},initPictures:function(obj){var options,scales,qnode,node,node2,status,elem;var pictures=obj?$(obj):$(".SVGgraph");$(pictures).each(function(){var that=$(this);status=0;SVG=new pictureObject();options=$(this).attr("options");that.removeAttr("id");if(options){with(Math){eval("options={"+options+"}")}setOptions(options)}else{options={}}if(options.pan==false){SVG.pan=false}SVG.coords=options.coords||SVG.coords;SVG.src=$.trim($(this).text());that.empty();if(typeof options.width=="number"&&options.width>0){SVG.width=options.width;status+=1}if(typeof options.height=="number"&&options.height>0){SVG.height=options.height;status+=2}var scales=getScales(options.scales);SVG.xmin=scales[0];SVG.xmax=scales[1];SVG.ymin=scales[2];SVG.ymax=scales[3];status+=scales[4];SVG.height=options.height;if(status%4!=0){SVG.width=options.width}if(!SVG.width){SVG.width=1.6*SVG.height}else{if(!SVG.height){SVG.height=0.625*SVG.width}}if(status<8){SVG.ymax=0.5*SVG.height*(SVG.xmax-SVG.xmin)/SVG.width;SVG.ymin=-SVG.ymax}else{if(status<12){SVG.xmax=0.5*SVG.width*(SVG.ymax-SVG.ymin)/SVG.height;SVG.xmin=-SVG.xmax}}if(status==12||status==13){SVG.height=SVG.width*(SVG.ymax-SVG.ymin)/(SVG.xmax-SVG.xmin)}else{if(status==14){SVG.width=SVG.height*(SVG.xmax-SVG.xmin)/(SVG.ymax-SVG.ymin)}}SVG.id=options.id||Math.randomString(16);qnode=createSVGElement("svg");elem=$(qnode);qnode.id=SVG.id;elem.attr("xmlns","http://www.w3.org/2000/svg");elem.attr("xmlns:ev","http://www.w3.org/2001/xml-events");elem.attr("xmlns:xlink","http://www.w3.org/1999/xlink");elem.attr("version","1.1");elem.attr("baseProfile","full");if(options.border){elem.attr("style","border:"+options.border)}node2=createSVGElement("defs");node2.id=SVG.id+"_Defs";$(qnode).append(node2);node2=createSVGElement("g");node2.id=SVG.id+"_Canvas";$(qnode).append(node2);that.append(qnode);this.style.position="relative";if(!(this.nodeName=="SPAN")){setAction("mousemove",updatePosition);if(SVG.pan){setAction("mouseup",onDrop)}if(window.addEventListener){var evt=$.browser.mozilla?"DOMMouseScroll":"mousewheel";qnode.addEventListener(evt,onWheel,false)}}setAction("mousedown",onClick);setAction("mouseover",switchTo);canvas=$("#"+SVG.id+"_Canvas")[0];resize(1)});if(pictures.length>0&&$("#SVGtoolbar").length===0){node=createElementXHTML("span");node.id="SVGtoolbar";node.style.position="absolute";node.style.textAlign="left";node.style.zIndex=10;node=addButton(node,"X","Close editor",closeEditor);node=addButton(node,"Update","Update picture",updateButton,"SVGupdateButton");node=addButton(node,"SVG","View SVG code",exportSVG);node=addButton(node,"-","Zoom out",function(){zoom(1.25,true)});node=addButton(node,"+","Zoom in",function(){zoom(0.8,true)});node=addButton(node,"\u2191","Enlarge picture",function(){resize(0.8)});node=addButton(node,"\u2193","Reduce picture",function(){resize(1.25)});$(node).append("<br />");node2=createElementXHTML("textarea");$(node2).attr({id:"SVGsrc",rows:8,cols:60});$(node).append(node2);$(node).hide();$("body").append(node)}}}}(jQuery);
//}}}
/***
!~TiddlyWiki formatters
***/
//{{{
if(!version.extensions.MathSVGPlugin) { //# ensure that the plugin is only installed once
version.extensions.MathSVGPlugin = {installed: true};
MSVG.generic();

config.formatterHelpers.MathSVGHelper = function(z) {
  if(z.tiddler && MSVG.noMathTag && jQuery.inArray(MSVG.noMathTag,z.tiddler.tags)>-1) return;
  this.lookaheadRegExp.lastIndex = z.matchStart;
  var lookaheadMatch = this.lookaheadRegExp.exec(z.source);
  if(lookaheadMatch){
    var eq = MSVG.parseMath(lookaheadMatch[1],this.displaystyle);
    if(this.displaystyle){
      var node = createTiddlyElement(z.output,"div");
      node.style.textAlign='center';
      node.appendChild(eq);
      z.output.appendChild(node);
    } else {z.output.appendChild(eq);}
    z.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
  }
}

config.formatters.push( {
  name: "clatex",
  match: "\\$\\$",
  lookaheadRegExp: /\$\$((?:.|\n)*?)\$\$/mg,
  displaystyle: true,
  handler: config.formatterHelpers.MathSVGHelper
})

config.formatters.push( {
  name: "clatex2",
  match: "\\\\\\\[",
  lookaheadRegExp: /\\\[((?:.|\n)*?)\\\]/mg,
  displaystyle: true,
  handler: config.formatterHelpers.MathSVGHelper
})

config.formatters.push( {
  name: "latex",
  match: "\\$",
  lookaheadRegExp: /\$((?:.|\n)*?)\$/mg,
  displaystyle: false,
  handler: config.formatterHelpers.MathSVGHelper
})

config.formatters.push( {
  name: "latex2",
  match: "\\\\\\\(",
  lookaheadRegExp: /\\\(((?:.|\n)*?)\\\)/mg,
  displaystyle: false,
  handler: config.formatterHelpers.MathSVGHelper
})

config.formatters.push( {
  name: "graph",
  match: "<div",
  lookaheadRegExp: /<div.+SVGgraph.+?>((?:.|\n)*?)<\/div>/mg,
  handler: function(z){
    if(z.tiddler && MSVG.noSvgTag && jQuery.inArray(MSVG.noSvgTag,z.tiddler.tags)>-1) return;
    this.lookaheadRegExp.lastIndex = z.matchStart;
    var lookaheadMatch = this.lookaheadRegExp.exec(z.source);
    if(lookaheadMatch){
      var text = lookaheadMatch[0].replace('<div','<div id="currentGraph"');
      jQuery(z.output).append(text);
      MSVG.initPictures("#currentGraph");
      z.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
    }
  }
})

config.formatters.push( {
  name: "inlineGraph",
  match: "<span",
  lookaheadRegExp: /<span.+SVGgraph.+?>((?:.|\n)*?)<\/span>/mg,
  handler: function(z){
    if(z.tiddler && MSVG.noSvgTag && jQuery.inArray(MSVG.noSvgTag,z.tiddler.tags)>-1) return;
    this.lookaheadRegExp.lastIndex = z.matchStart;
    var lookaheadMatch = this.lookaheadRegExp.exec(z.source);
    if(lookaheadMatch){
      var text = lookaheadMatch[0].replace('<span','<span id="currentGraph"');
      jQuery(z.output).append(text);
      MSVG.initPictures("#currentGraph");
      z.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
    }
  }
})

}
//}}}
/***
The script should not be edited. All available options can be set by the following variables:
***/
//{{{
//MSVG.showFormulaOnMouseOver = false; //show LaTeX code on mouse over the equation
//MSVG.latexImages = false; //set to true to force the use of an external converter
//MSVG.latexConverter = "http://www.yourequations.com/eq.latex?"; //link to external converter
//MSVG.mathColor = "green"; //font color
//MSVG.mathFontSize = ""; //font size
//MSVG.mathFontFamily = ""; //font family
MSVG.noMathTag = null;
MSVG.noSvgTag = 'noSVG';
//}}}
/***
New symbols or commands can be defined here:
***/
//{{{
 var commands = ["nle","R","diagup","varnothing","ind","DD"];
 var symbols = ["\u2270","\u211D","\u2571","\u2205","\u2AEB","\\frac{d}{dr}"];
 MSVG.define(commands,symbols);
//}}}
/***
External javascript code can be loaded here:
***/
//{{{
 jQuery.getScript("demo.js");
 var planets = ["Venus", "Earth", "Mars", "Jupiter"];
//}}}
rm $\mathrm{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$
rm $\mathrm{abcdefghijklmnopqrstuvwxyz}$

it $\mathit{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$
it $\mathit{abcdefghijklmnopqrstuvwxyz}$

sf $\mathsf{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$
sf $\mathsf{abcdefghijklmnopqrstuvwxyz}$

tt $\mathtt{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$
tt $\mathtt{abcdefghijklmnopqrstuvwxyz}$

bf $\mathbf{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$
bf $\mathbf{abcdefghijklmnopqrstuvwxyz}$

bb $\mathbb{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$
bb $\mathbb{abcdefghijklmnopqrstuvwxyz}$

frak $\mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$
frak $\mathfrak{abcdefghijklmnopqrstuvwxyz}$

cal $\mathcal{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$
cal $\mathcal{abcdefghijklmnopqrstuvwxyz}$
!!!Derivative as a function $f'(x)$

<div class='SVGgraph' options='width:300,height:300,scales:[-2.5,2.5,-2.5,2.5]'>
 function update() {
  var py = f(px);
  var h = .01;
  var dy = f(px+h)-py;
  var m = dy/h;
  dot([px,m],{marker:"o",label:"m",id:"m_id",pos:"n"});
  dot([px,m],{marker:"*",size:3,markerstroke: "red"})
  setOptions({stroke:"red"});
  if (m>=0) {
    polygon([[px-.5,py-.5*m],[px+.5,py+.5*m],[px+.5,py-.5*m]],{id:"tangent"});
    text([px+.5,py],"m="+m.toFixed(1),{pos:"e",id:"rise",style:"italic"});
    text([px,py-.5*m],"1",{pos:"s",id:"run2"});
  } else {
    polygon([[px-.5,py-.5*m],[px+.5,py+.5*m],[px-.5,py+.5*m]],{id:"tangent"});
    text([px-.5,py],"m="+m.toFixed(1),{pos:"w",id:"rise",style:"italic"});
    text([px,py+.5*m],"1",{pos:"s",id:"run"});
  };
  px = SVG.mouse[0];
 };

 function f(x){return -pow(x,3)+2*x;}

 axes();
 setAction("mousemove",update);
 plot(f);
 var px = .5;
 update()
</div>
<span class='SVGgraph' options='width:300> axes(); plot("sin(x)"); </span>

<div class='SVGgraph' options='width:300,height:200,scales:[-3,3,-2,2]'>
axes();
grid({dx:0.5,dy:0.5});
plot("(x-2)*(x-1)*x*(x+1)*(x+2)/2",{min:-2.5,max:2.5});
</div>
$\diagup X\ind Y \tilde{A} \varnothing$

$A = \left(\begin{array}{ccc}
1-x & 0 & 0 \\ 0 & 1-x & 0 \\ 0 & 0 & 1-x \end{array}\right)$

$\sum a_i + \sum_{i=0}^{+\infty} b_i$

$f(x) = \left\{\begin{array}{ll}
x^2 \sin \frac1x & \textrm{if} x \ne 0, \\
0 & \textrm{if} x = 0 .
\end{array}\right.$

$\displaystyle{ \lim_{x\to\infty} f(x) = k \choose r + \frac{a}{b} \sum_{n=1}^{+\infty} a_n + \left\{ \frac{1}{13} \sum_{n=1}^{+\infty} b_n \right\} }$
Opera fires mousemove before mouseover.
This is fixed in Opera 10.
Click to pause/restart animation
<div class='SVGgraph' options="width:600,height:300,scales:[-2.2,31,-0.05,0.3], border:'2px dotted black'">
function bn(x){
return C(x+r-1,x)*pow(1-theta,x)*pow(theta,r);
}

update = function() {
   if (draw==1) {
    r = max(1,floor(SVG.mouse[0]));
    theta = max(0,min(1,5*SVG.mouse[1]));
    plot(bn,{id:"bn2",min:0, max:31, points:31,marker:"ooo",size:10,markerstroke:"yellow",markerfill:"yellow",stroke:"none"});
   text([21,0.25],"$NB(r="+r+",\\theta="+theta.toFixed(2)+")$",{id:"param",fontsize:16,fontfill:"blue",pos:"E"});
   if(theta>0) {
     var mean=r/theta-r;
     line([mean,-0.5],[mean,3],{id:"mean",stroke:"red",strokewidth:2}); 
   }
  }
};

click = function() {
  draw*=-1;
}

var r, theta;
axes({origin:[-1,0],dy:0.1,marker:">"});
setAction("mousemove",update);
setAction("click",click);
var draw=1;
</div>
Click to pause/restart animation
<div class='SVGgraph' options="width:400,height:250,scales:[-4,4,-0.1,1], border:'5px solid orange'">
function f(x){return 1/sqrt(2*PI*vsigma2)*exp(-1/vsigma2*pow(x-vmu,2));}

function update() {
  if (draw==1) {
      vmu = SVG.mouse[0]||0;
      vsigma2 = max(0.0001,SVG.mouse[1]||0.1)*10;
    plot(f,{id:"pdf",points:100,strokewidth:2});
    dot([vmu,0],{id:"mean"});
    text([-3.8,0.9],"N("+vmu.toFixed(2)+","+vsigma2.toFixed(3)+")",{id:"param",pos:"E"});
  }
};

function click() {
  draw*=-1;
}

setAction("mousemove",update);
setAction("mousedown",click);
axes({dy:0.2,marker:">",decy:1});
var vmu = 0;
var vsigma2 = 1;
var draw = 1;
update();
</div>
<div class='SVGgraph'>
hello=function(evt){
alert("Hey, why are you clicking me?\nDo you have something against blue rectangles?");
return false;
}

rect([0,0],[2,1],{id:"box",fill:"blue"});
setAction("click",hello,"box");
</div>
|''Name''|PSTheme|
|''Description''|personal theme|

!Author Mode
|PageTemplate|##PageTemplate|
|ViewTemplate|##ViewTemplate|
|EditTemplate|##EditTemplate|
|StyleSheet|##StyleSheet|
|ColorPalette|ColorPalette|

!Read-Only Mode
|PageTemplateReadOnly|##PageTemplate|
|ViewTemplateReadOnly|##ViewTemplate|
|EditTemplateReadOnly|##EditTemplate|
|StyleSheetReadOnly|##StyleSheet|
|ColorPalette|ColorPalette|

!PageTemplate
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::Foreground]] [[ColorPalette::PrimaryMid]]'>
<div class="titles"><span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span></div>
<span class='topMenu' refresh='content' tiddler='TopMenu'></span>
</div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->

!ViewTemplate
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->

!EditTemplate
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<div class='editor' macro='edit text'></div>
<!--}}}-->

!StyleSheet
[[StyleSheet]]
/*{{{*/
.HideSideBarButton {float:right;  font-size: 1em;} 

.viewer .center {
 text-align: center;
 margin-left: auto;
 margin-right: auto
}

body {
 font-family: Nobile,arial,sans-serif;
 line-height: 1.2
}

.header {
 padding: 1.25em 0 0 0;
}

.header a {
 color: [[ColorPalette::Background]];
 padding: 0.25em 0.25em 0.25em 0.25em;
 margin-bottom: -2px
}

.header .externalLink {
 text-decoration: none;
}

.header a:hover {
 color:[[ColorPalette::Foreground]];
 background: [[ColorPalette::Background]];
}

.siteTitle {
 color: [[ColorPalette::SecondaryLight]];
 font-size: 2em;
 font-weight: bold;
 padding: 0 0 0 0.5em;
}

.siteSubtitle {
 color: [[ColorPalette::SecondaryLight]];
 font-weight: bold;
}

.titles {
 margin: 0.25em 0 0.5em 0
}

.topMenu {
 padding: 0 0 0 1em;
 font-size: 0.9em;
}

h1,h2,h3,h4,h5 {
 color: [[ColorPalette::Foreground]];
 border: none;
}

h1 {font-size:1.6em;}
h2 {font-size:1.35em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.8em;}

.viewer hr {
 border: 0;
 border-top: 1px dotted [[ColorPalette::SecondaryDark]];
 color: [[ColorPalette::SecondaryDark]];
}

.title {
 font-size:1.8em;
 border-bottom: 1px dotted [[ColorPalette::SecondaryDark]];
 padding-bottom: 0.1em;
 margin-bottom: 0.1em;
}

.subtitle {
 padding-top: 0.25em;
 margin-bottom: 0.25em;
 font-size: x-small
}

.editor input, .editor textarea {
 margin-bottom: 1px;
}

input {font-size: 100%;}

.txtOptionInput {width: 15em;}

#displayArea {margin: 1em 15.5em 0em 1em;}

@media print {
body {background:#ffffff;}
#mainMenu, #sidebar, #messageArea, .tagging, .tagged, .subtitle, #pageFooter, .button, .header {display: none ! important;}
#displayArea {margin: 1em 0em 0em 0em !important;}
.tiddler {padding:0;}
noscript{ display:none;}
.title {color:#000;}
}
/*}}}*/
/***
|''Name:''|PasswordOptionPlugin|
|''Description:''|Extends TiddlyWiki options with non encrypted password option.|
|''Version:''|1.0.2|
|''Date:''|Apr 19, 2007|
|''Source:''|http://tiddlywiki.bidix.info/#PasswordOptionPlugin|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.2.0 (Beta 5)|
***/
//{{{
version.extensions.PasswordOptionPlugin = {
	major: 1, minor: 0, revision: 2, 
	date: new Date("Apr 19, 2007"),
	source: 'http://tiddlywiki.bidix.info/#PasswordOptionPlugin',
	author: 'BidiX (BidiX (at) bidix (dot) info',
	license: '[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D]]',
	coreVersion: '2.2.0 (Beta 5)'
};

config.macros.option.passwordCheckboxLabel = "Save this password on this computer";
config.macros.option.passwordInputType = "password"; // password | text
setStylesheet(".pasOptionInput {width: 11em;}\n","passwordInputTypeStyle");

merge(config.macros.option.types, {
	'pas': {
		elementType: "input",
		valueField: "value",
		eventName: "onkeyup",
		className: "pasOptionInput",
		typeValue: config.macros.option.passwordInputType,
		create: function(place,type,opt,className,desc) {
			// password field
			config.macros.option.genericCreate(place,'pas',opt,className,desc);
			// checkbox linked with this password "save this password on this computer"
			config.macros.option.genericCreate(place,'chk','chk'+opt,className,desc);			
			// text savePasswordCheckboxLabel
			place.appendChild(document.createTextNode(config.macros.option.passwordCheckboxLabel));
		},
		onChange: config.macros.option.genericOnChange
	}
});

merge(config.optionHandlers['chk'], {
	get: function(name) {
		// is there an option linked with this chk ?
		var opt = name.substr(3);
		if (config.options[opt]) 
			saveOptionCookie(opt);
		return config.options[name] ? "true" : "false";
	}
});

merge(config.optionHandlers, {
	'pas': {
 		get: function(name) {
			if (config.options["chk"+name]) {
				return encodeCookie(config.options[name].toString());
			} else {
				return "";
			}
		},
		set: function(name,value) {config.options[name] = decodeCookie(value);}
	}
});

// need to reload options to load passwordOptions
loadOptionsCookie();

/*
if (!config.options['pasPassword'])
	config.options['pasPassword'] = '';

merge(config.optionsDesc,{
		pasPassword: "Test password"
	});
*/
//}}}
<div class='SVGgraph' options="scales:[-1,4,-1,4], border:'black 1px solid'">
function echo(){
var pos = Math.floor(SVG.mouse[0]);
text([3,-0.5],"Planet: "+ planets[pos],{id:'label'});
return false;
}

axes();
plot("x",{min:1,max:3,stroke:"none",marker:"ooo",markerfill:"#FFD500",markerstroke:"none",points:2});
setAction("mousemove",echo);
</div>
!A cardioid
<div class='SVGgraph' options='width:200,height:200,scales:[-1.2,2.2,-1.7,1.7],coords:"polar"'>
function moveit() {
var angle = getAngle([0.5,0]);
var p = [0.5+cos(angle),sin(angle)];
var q = [cos(angle)*(1+cos(angle)),sin(angle)*(1+cos(angle))];
rotate("roll",angle,{center:[0.5,0],replace:true});
line(p,q,{id:"radius",marker:"*-*",size:10});
}

axes({dx:0.5,dy:0.5});
grid({dx:0.5,dy:3});
setAction("mousemove",moveit);
circle([0.5,0],0.5);
circle([0.5,0],1);
setOptions({stroke:'red', strokewidth:2});
polarPlot("1+cos(x)");
setOptions({stroke:"green"});
circle([1.5,0],0.5,{id:"roll"});
line([1.5,0],[2,0],{id:"radius",marker:"*-*",markerstroke:"green",size:10});
</div>

<div class='SVGgraph' options='width:200,height:200,scales:[-1.2,2.2,-1.7,1.7],coords:"polar"'>
axes();
setOptions({stroke:'red'});
polarPlot("1+cos(x)");
</div>
The following produces a graph with three dots all of size=4.
<div class='SVGgraph'>
axes();
dot([1,1]);
dot([2,1],{size:20,markerstroke:"red"});
dot([3,1],{size:4});
</div>

The following produces a graph with three dots all of size=20.
<div class='SVGgraph'>
axes();
dot([1,1]);
dot([3,1],{size:4});
dot([2,1],{size:20});
</div>

The following produces a graph with three dots all with the default of size=8.
<div class='SVGgraph'>
axes();
dot([3,1],{size:4});
dot([2,1],{size:20});
dot([1,1]);
</div>

<span class='SVGgraph'>
axes();
line([-4,2],[4,2],{marker:"**S",markerstroke:"red",stroke:"red"});
line([-4,1],[4,1],{marker:"**S"});
</span><span class='SVGgraph'>
axes();
line([-4,2],[4,2],{marker:"**S"});
line([-4,1],[4,1],{marker:"**S",markerstroke:"red",stroke:"red"});
</span>
Click the picture to generate a new set of colorful dots.
<div class='SVGgraph' options='width:400,height:400,scales:[-0.5,5.5,-0.5,5.5]'>
setAction("mousedown",drawPicture);
var c = new String("0123456789"+"abcdef");
var ma, mb, mc, d;
for(var j=0;j<300;j++){
ma=[runif(0,5,2),runif(0,5,2)]
mb=runif(0,1,2)
mc=runif(0.05,0.3,4)
d="#"+randomString(6,c);
circle(ma,mc,{stroke:"none",fill:d,fillopacity:mb})
}
</div>
<span class='SVGgraph' options='width:240,scales:[0,20,4,15]'>
plot("3+0.5*x",{stroke:"red"});
var data = [[10,8.04], [8,6.95], [13,7.58], [9,8.81], [11,8.33], [14,9.96], [6,7.24], [4,4.26], [12,10.84], [7,4.82], [5,5.68]];
path(data,{marker:"***",stroke:"none",size:4});
</span><span class='SVGgraph' options='width:240,scales:[0,20,4,15]'>
plot("3+0.5*x",{stroke:"red"});
var data = [[10,9.14], [8,8.14], [13,8.74], [9,8.77], [11,9.26], [14,8.10], [6,6.13], [4,3.10], [12,9.13], [7,7.26], [5,4.74]];
path(data,{marker:"***",stroke:"none",size:4});
</span>
<span class='SVGgraph' options='width:240,scales:[0,20,4,15]'>
plot("3+0.5*x",{stroke:"red"});
var data = [[10,7.46], [8,6.77], [13,12.74], [9,7.11], [11,7.81], [14,8.84], [6,6.08], [4,5.39], [12,8.15], [7,6.42], [5,5.73]];
path(data,{marker:"***",stroke:"none",size:4});
</span><span class='SVGgraph' options='width:240,scales:[0,20,4,15]'>
plot("3+0.5*x",{stroke:"red"});
var data = [[8,6.58],[8,5.76],[8,7.71],[8,8.84],[8,8.47],[8,7.04],[8,5.25],[19,12.50],[8,5.56],[8,7.91],[8,6.89]];
path(data,{marker:"***",stroke:"none",size:4});
</span>
*Shift + left mouse button (LMB) click -- show/hide toolbar
*LMB drag and drop -- pan
*Mouse wheel -- zoom in/out (also available in the toolbar)
*Shift + Mouse wheel -- resize (also available in the toolbar)
<div class='SVGgraph'>
 axes();
 area("step(3-x,sqrt(pow(3,2)-pow(x,2)))","step(2-x,sqrt(pow(2,2)-pow(x,2)))",{min:0, max:3, stroke:"none",fill:"#ddd"});
</div>
<div class='SVGgraph' options='width:300,height:200,scales:[-0.7,5.5,-0.07,0.55]'>
 axes({dx:1,dy:0.1});
 a=[0.25, 0.45, 0.19, 0.09, 0.02]
 p=[[0,0]];
 for (i = 0; i < a.length; i += 1) {
  rect([i,0],[i+1,a[i]],{stroke:'red',fill:"orange"});
  text([i+0.5,a[i]+0.02],a[i],{pos:"n"});
  p.push([i+0.5,a[i]]);
 }
 p.push([a.length,0]);
 path(p,{stroke:"blue",fill:"none",curve:""});
</div>
mathematical expressions and graphics on ~TiddlyWiki
~MathSVGPlugin
http://www.math.ist.utl.pt/~psoares/
<div class='SVGgraph' options='width:300,height:300,scales:[-3.4,3.4,-3.4,3.4]'>
axes();
slopeField("x+y",{dx:0.5, dy:0.5, marker:"-->",size:4, markerstroke:"pink",stroke:"pink"});
</div>
<div class='SVGgraph'>
axes();
line([-2,0],[0,-2],{marker:"<->"});
dot([3,1.5]);
line([2,2.5],[4,2.5],{marker:">->"});
line([0,0],[1.5,1.5],{marker:"-->"});
loop([0,1],{direction:[2,2],marker:"-->"});
arc({start:[2,2],end:[4,2],marker:"*->"});
arc({start:[-2,2],end:[-4,2],marker:"|->"});
arc({center:[0,0],startangle:0,endangle:-PI/2,radius:1,marker:"<->",largearc:0});
setOptions({fill:'green', stroke:'red'});
arc({center:[-3.5,0],radius:1,startangle:PI/2,endangle:0,marker:"**",closed:true});
polygon([[-1,-1],[-1,-2],[-2,-1]],{marker:"xxx",label:["A","B","C"]});
line([0,0],[2,-2],{stroke: "yellow", strokewidth: 5});
line([0,0],[-2,1],{marker:'--o'});

rect([2,-3],[3,-1],{rx:0.2,ry:0.2});
var p=[[1,1],[2,0.5],[3.5,0.5],[1,1]];
curve(p)
</div>
Click the picture to generate a new drawing.
<div class='SVGgraph' options='width:600,height:400,scales:[-36,36]'>
setAction("mousedown",drawPicture);
  var c = new String("0123456789"+"abcdef");
axes({dx:5});grid({dx:5});
 var s = "";
 var r = runif(1,30);
setOptions({strokewidth:3});
for (var i=0; i < r; i++) s += runif(1,9).toString();
text([-35,-23],s+" Length="+s.length,{pos:"ne"});
spirolateral(s);
//spirolateral("614937966"); //use this to draw a specific spirolateral
function spirolateral(st) {
  var i, j, x=0, y=0, nx=1, ny=1, d;
  j = runif(0,3); //start in any of the 4 directions
  while ((nx!=0 || ny!=0) && abs(x) < 100 && abs(y) < 100) {

    setOptions({stroke: "#"+randomString(6,c)});
    for (i=0; i< st.length; i++) {
      d = parseInt(st.charAt(i));
      nx = x+(j==0?d:(j==1?0:(j==2?-d:0)));
      ny = y+(j==0?0:(j==1?d:(j==2?0:-d)));
      line([x,y],[nx,ny]);
      x = nx;
      y = ny;
      j = (j+1)%4;
    }
  }
}
</div>
<div class='SVGgraph'>
axes();
plot("step(x)+step(x-1,2)-step(x-2)");
</div>

<div class='SVGgraph'>
axes();
plot("step(x)+step(x-1,2)-step(x-2)",{steps:[0,1,2]});
dot([0,0],{marker:'o',markerfill:'white'});
dot([0,1],{marker:'*'});
dot([1,1],{marker:'o',markerfill:'white'});
dot([1,3],{marker:'*'});
dot([2,3],{marker:'o',markerfill:'white'});
dot([2,2],{marker:'*'});
</div>
/*{{{*/
div[tags~="latex"].tiddler .viewer, math {
 font-family: "Bitstream Vera Serif", "Times New Roman", serif;
}

#tiddlerBrightSkies {background:#003}

#tiddlerMoreLaTeX mstyle{
 color: Red;
 font-size: 150%
}

.myMath mstyle{
 font-family: "Bitstream Vera Sans";
 background: blue;
 color: yellow;
 font-size: 120%
}

/*svg text{font-family: "Bitstream Vera Serif", "Times New Roman", serif;}*/

.floatright{float:right}

.divcenter {margin-left:auto; margin-right:auto}

.center{text-align:center}
/*}}}*/
<div class='SVGgraph'>
grid();
axes({dx:1,dy:1});
setOptions({stroke: "blue", strokedasharray: "5,5"});

plot("tan(x)");  // the predefined function
setOptions({stroke: "red", strokedasharray: "none"});

// Replace the "0" below with a matching function and click Update.
plot("0");
</div>
/***
|''Name:''|ToggleSideBarMacro|
|''Description:''|Provides a button for toggling visibility of the SideBar.|
|''Author:''|Paulo Soares (based on a previous macro from Saq Imtiaz)|
|''Source:''|http://www.math.ist.utl.pt/~psoares/addons.html|
|''Version:''|1.1|
|''Date:''|Jan 28, 2011|
|''License:''|[[Creative Commons Attribution-ShareAlike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/ ]]|
|''~CoreVersion:''|2.5|
***/
//{{{
(function($) {
config.macros.toggleSideBar={
  mode: 'hide',
  arrowShow: "◄",
  arrowHide: "►",
  tooltip: "Toggle sidebar"
};

config.macros.toggleSideBar.handler=function(place){
  var label = (this.mode == "hide")? this.arrowShow : this.arrowHide;
  createTiddlyButton(place,label,this.tooltip,this.onToggleSideBar,"HideSideBarButton");
  if(this.mode == "hide"){ 
    $('#sidebar').hide();
    $('#displayArea').css({'margin-right':'1em'});
  }
};

config.macros.toggleSideBar.onToggleSideBar = function(){
  var cm = config.macros.toggleSideBar;
  var button = this.firstChild;
  var sidebar = $('#sidebar');
  if(sidebar.is(':visible') ) {
    $('#displayArea').css({'margin-right':'1em'});
    button.data = cm.arrowShow;
  } else {
    $('#displayArea').css({'margin-right':''});
    button.data = cm.arrowHide;
  }
  sidebar.toggle();
  return false;
}
})(jQuery)
//}}}
<<toggleSideBar>>[[?|What is this?]] [[About]] [[ASCIIMathML|http://www1.chapman.edu/~jipsen/mathml/asciimath.html]] [[MathJax|http://www.mathjax.org]]
!Active tickets <<tag open>>
!Closed tickets <<tag closed>>
//{{{
readOnly = false; // means web visitors can experiment with your site by clicking edit
config.views.wikified.defaultText = ""; // don't need message when a tiddler doesn't exist
config.views.editor.defaultText = "";   // don't need message when creating a new tiddler
config.messages.backstage.open.text="";
config.messages.backstage.close.text="";
config.options.txtTheme = "PSTheme";
config.macros.toggleSideBar.mode = 'show';
//}}}
/***
|''Name:''|UploadPlugin|
|''Description:''|Save to web a TiddlyWiki|
|''Version:''|4.1.4|
|''Date:''|2008-08-11|
|''Source:''|http://tiddlywiki.bidix.info/#UploadPlugin|
|''Documentation:''|http://tiddlywiki.bidix.info/#UploadPluginDoc|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.2.0|
|''Requires:''|PasswordOptionPlugin|
***/
//{{{
version.extensions.UploadPlugin = {
	major: 4, minor: 1, revision: 4,
	date: new Date("2008-08-11"),
	source: 'http://tiddlywiki.bidix.info/#UploadPlugin',
	author: 'BidiX (BidiX (at) bidix (dot) info',
	coreVersion: '2.2.0'
};

//
// Environment
//

if (!window.bidix) window.bidix = {}; // bidix namespace
bidix.debugMode = false;	// true to activate both in Plugin and UploadService
	
//
// Upload Macro
//

config.macros.upload = {
// default values
	defaultBackupDir: '',	//no backup
	defaultStoreScript: "store.php",
	defaultToFilename: "index.html",
	defaultUploadDir: ".",
	authenticateUser: true	// UploadService Authenticate User
};
	
config.macros.upload.label = {
	promptOption: "Save and Upload this TiddlyWiki with UploadOptions",
	promptParamMacro: "Save and Upload this TiddlyWiki in %0",
	saveLabel: "save to web", 
	saveToDisk: "save to disk",
	uploadLabel: "upload"	
};

config.macros.upload.messages = {
	noStoreUrl: "No store URL in parmeters or options",
	usernameOrPasswordMissing: "Username or password missing"
};

config.macros.upload.handler = function(place,macroName,params) {
	if (readOnly)
		return;
	var label;
	if (document.location.toString().substr(0,4) == "http") 
		label = this.label.saveLabel;
	else
		label = this.label.uploadLabel;
	var prompt;
	if (params[0]) {
		prompt = this.label.promptParamMacro.toString().format([this.destFile(params[0], 
			(params[1] ? params[1]:bidix.basename(window.location.toString())), params[3])]);
	} else {
		prompt = this.label.promptOption;
	}
	createTiddlyButton(place, label, prompt, function() {config.macros.upload.action(params);}, null, null, this.accessKey);
};

config.macros.upload.action = function(params)
{
		// for missing macro parameter set value from options
		if (!params) params = {};
		var storeUrl = params[0] ? params[0] : config.options.txtUploadStoreUrl;
		var toFilename = params[1] ? params[1] : config.options.txtUploadFilename;
		var backupDir = params[2] ? params[2] : config.options.txtUploadBackupDir;
		var uploadDir = params[3] ? params[3] : config.options.txtUploadDir;
		var username = params[4] ? params[4] : config.options.txtUploadUserName;
		var password = config.options.pasUploadPassword; // for security reason no password as macro parameter	
		// for still missing parameter set default value
		if ((!storeUrl) && (document.location.toString().substr(0,4) == "http")) 
			storeUrl = bidix.dirname(document.location.toString())+'/'+config.macros.upload.defaultStoreScript;
		if (storeUrl.substr(0,4) != "http")
			storeUrl = bidix.dirname(document.location.toString()) +'/'+ storeUrl;
		if (!toFilename)
			toFilename = bidix.basename(window.location.toString());
		if (!toFilename)
			toFilename = config.macros.upload.defaultToFilename;
		if (!uploadDir)
			uploadDir = config.macros.upload.defaultUploadDir;
		if (!backupDir)
			backupDir = config.macros.upload.defaultBackupDir;
		// report error if still missing
		if (!storeUrl) {
			alert(config.macros.upload.messages.noStoreUrl);
			clearMessage();
			return false;
		}
		if (config.macros.upload.authenticateUser && (!username || !password)) {
			alert(config.macros.upload.messages.usernameOrPasswordMissing);
			clearMessage();
			return false;
		}
		bidix.upload.uploadChanges(false,null,storeUrl, toFilename, uploadDir, backupDir, username, password); 
		return false; 
};

config.macros.upload.destFile = function(storeUrl, toFilename, uploadDir) 
{
	if (!storeUrl)
		return null;
		var dest = bidix.dirname(storeUrl);
		if (uploadDir && uploadDir != '.')
			dest = dest + '/' + uploadDir;
		dest = dest + '/' + toFilename;
	return dest;
};

//
// uploadOptions Macro
//

config.macros.uploadOptions = {
	handler: function(place,macroName,params) {
		var wizard = new Wizard();
		wizard.createWizard(place,this.wizardTitle);
		wizard.addStep(this.step1Title,this.step1Html);
		var markList = wizard.getElement("markList");
		var listWrapper = document.createElement("div");
		markList.parentNode.insertBefore(listWrapper,markList);
		wizard.setValue("listWrapper",listWrapper);
		this.refreshOptions(listWrapper,false);
		var uploadCaption;
		if (document.location.toString().substr(0,4) == "http") 
			uploadCaption = config.macros.upload.label.saveLabel;
		else
			uploadCaption = config.macros.upload.label.uploadLabel;
		
		wizard.setButtons([
				{caption: uploadCaption, tooltip: config.macros.upload.label.promptOption, 
					onClick: config.macros.upload.action},
				{caption: this.cancelButton, tooltip: this.cancelButtonPrompt, onClick: this.onCancel}
				
			]);
	},
	options: [
		"txtUploadUserName",
		"pasUploadPassword",
		"txtUploadStoreUrl",
		"txtUploadDir",
		"txtUploadFilename",
		"txtUploadBackupDir",
		"chkUploadLog",
		"txtUploadLogMaxLine"		
	],
	refreshOptions: function(listWrapper) {
		var opts = [];
		for(i=0; i<this.options.length; i++) {
			var opt = {};
			opts.push();
			opt.option = "";
			n = this.options[i];
			opt.name = n;
			opt.lowlight = !config.optionsDesc[n];
			opt.description = opt.lowlight ? this.unknownDescription : config.optionsDesc[n];
			opts.push(opt);
		}
		var listview = ListView.create(listWrapper,opts,this.listViewTemplate);
		for(n=0; n<opts.length; n++) {
			var type = opts[n].name.substr(0,3);
			var h = config.macros.option.types[type];
			if (h && h.create) {
				h.create(opts[n].colElements['option'],type,opts[n].name,opts[n].name,"no");
			}
		}
		
	},
	onCancel: function(e)
	{
		backstage.switchTab(null);
		return false;
	},
	
	wizardTitle: "Upload with options",
	step1Title: "These options are saved in cookies in your browser",
	step1Html: "<input type='hidden' name='markList'></input><br>",
	cancelButton: "Cancel",
	cancelButtonPrompt: "Cancel prompt",
	listViewTemplate: {
		columns: [
			{name: 'Description', field: 'description', title: "Description", type: 'WikiText'},
			{name: 'Option', field: 'option', title: "Option", type: 'String'},
			{name: 'Name', field: 'name', title: "Name", type: 'String'}
			],
		rowClasses: [
			{className: 'lowlight', field: 'lowlight'} 
			]}
};

//
// upload functions
//

if (!bidix.upload) bidix.upload = {};

if (!bidix.upload.messages) bidix.upload.messages = {
	//from saving
	invalidFileError: "The original file '%0' does not appear to be a valid TiddlyWiki",
	backupSaved: "Backup saved",
	backupFailed: "Failed to upload backup file",
	rssSaved: "RSS feed uploaded",
	rssFailed: "Failed to upload RSS feed file",
	emptySaved: "Empty template uploaded",
	emptyFailed: "Failed to upload empty template file",
	mainSaved: "Main TiddlyWiki file uploaded",
	mainFailed: "Failed to upload main TiddlyWiki file. Your changes have not been saved",
	//specific upload
	loadOriginalHttpPostError: "Can't get original file",
	aboutToSaveOnHttpPost: 'About to upload on %0 ...',
	storePhpNotFound: "The store script '%0' was not found."
};

bidix.upload.uploadChanges = function(onlyIfDirty,tiddlers,storeUrl,toFilename,uploadDir,backupDir,username,password)
{
	var callback = function(status,uploadParams,original,url,xhr) {
		if (!status) {
			displayMessage(bidix.upload.messages.loadOriginalHttpPostError);
			return;
		}
		if (bidix.debugMode) 
			alert(original.substr(0,500)+"\n...");
		// Locate the storeArea div's 
		var posDiv = locateStoreArea(original);
		if((posDiv[0] == -1) || (posDiv[1] == -1)) {
			alert(config.messages.invalidFileError.format([localPath]));
			return;
		}
		bidix.upload.uploadRss(uploadParams,original,posDiv);
	};
	
	if(onlyIfDirty && !store.isDirty())
		return;
	clearMessage();
	// save on localdisk ?
	if (document.location.toString().substr(0,4) == "file") {
		var path = document.location.toString();
		var localPath = getLocalPath(path);
		saveChanges();
	}
	// get original
	var uploadParams = new Array(storeUrl,toFilename,uploadDir,backupDir,username,password);
	var originalPath = document.location.toString();
	// If url is a directory : add index.html
	if (originalPath.charAt(originalPath.length-1) == "/")
		originalPath = originalPath + "index.html";
	var dest = config.macros.upload.destFile(storeUrl,toFilename,uploadDir);
	var log = new bidix.UploadLog();
	log.startUpload(storeUrl, dest, uploadDir,  backupDir);
	displayMessage(bidix.upload.messages.aboutToSaveOnHttpPost.format([dest]));
	if (bidix.debugMode) 
		alert("about to execute Http - GET on "+originalPath);
	var r = doHttp("GET",originalPath,null,null,username,password,callback,uploadParams,null);
	if (typeof r == "string")
		displayMessage(r);
	return r;
};

bidix.upload.uploadRss = function(uploadParams,original,posDiv) 
{
	var callback = function(status,params,responseText,url,xhr) {
		if(status) {
			var destfile = responseText.substring(responseText.indexOf("destfile:")+9,responseText.indexOf("\n", responseText.indexOf("destfile:")));
			displayMessage(bidix.upload.messages.rssSaved,bidix.dirname(url)+'/'+destfile);
			bidix.upload.uploadMain(params[0],params[1],params[2]);
		} else {
			displayMessage(bidix.upload.messages.rssFailed);			
		}
	};
	// do uploadRss
	if(config.options.chkGenerateAnRssFeed) {
		var rssPath = uploadParams[1].substr(0,uploadParams[1].lastIndexOf(".")) + ".xml";
		var rssUploadParams = new Array(uploadParams[0],rssPath,uploadParams[2],'',uploadParams[4],uploadParams[5]);
		var rssString = generateRss();
		// no UnicodeToUTF8 conversion needed when location is "file" !!!
		if (document.location.toString().substr(0,4) != "file")
			rssString = convertUnicodeToUTF8(rssString);	
		bidix.upload.httpUpload(rssUploadParams,rssString,callback,Array(uploadParams,original,posDiv));
	} else {
		bidix.upload.uploadMain(uploadParams,original,posDiv);
	}
};

bidix.upload.uploadMain = function(uploadParams,original,posDiv) 
{
	var callback = function(status,params,responseText,url,xhr) {
		var log = new bidix.UploadLog();
		if(status) {
			// if backupDir specified
			if ((params[3]) && (responseText.indexOf("backupfile:") > -1))  {
				var backupfile = responseText.substring(responseText.indexOf("backupfile:")+11,responseText.indexOf("\n", responseText.indexOf("backupfile:")));
				displayMessage(bidix.upload.messages.backupSaved,bidix.dirname(url)+'/'+backupfile);
			}
			var destfile = responseText.substring(responseText.indexOf("destfile:")+9,responseText.indexOf("\n", responseText.indexOf("destfile:")));
			displayMessage(bidix.upload.messages.mainSaved,bidix.dirname(url)+'/'+destfile);
			store.setDirty(false);
			log.endUpload("ok");
		} else {
			alert(bidix.upload.messages.mainFailed);
			displayMessage(bidix.upload.messages.mainFailed);
			log.endUpload("failed");			
		}
	};
	// do uploadMain
	var revised = bidix.upload.updateOriginal(original,posDiv);
	bidix.upload.httpUpload(uploadParams,revised,callback,uploadParams);
};

bidix.upload.httpUpload = function(uploadParams,data,callback,params)
{
	var localCallback = function(status,params,responseText,url,xhr) {
		url = (url.indexOf("nocache=") < 0 ? url : url.substring(0,url.indexOf("nocache=")-1));
		if (xhr.status == 404)
			alert(bidix.upload.messages.storePhpNotFound.format([url]));
		if ((bidix.debugMode) || (responseText.indexOf("Debug mode") >= 0 )) {
			alert(responseText);
			if (responseText.indexOf("Debug mode") >= 0 )
				responseText = responseText.substring(responseText.indexOf("\n\n")+2);
		} else if (responseText.charAt(0) != '0') 
			alert(responseText);
		if (responseText.charAt(0) != '0')
			status = null;
		callback(status,params,responseText,url,xhr);
	};
	// do httpUpload
	var boundary = "---------------------------"+"AaB03x";	
	var uploadFormName = "UploadPlugin";
	// compose headers data
	var sheader = "";
	sheader += "--" + boundary + "\r\nContent-disposition: form-data; name=\"";
	sheader += uploadFormName +"\"\r\n\r\n";
	sheader += "backupDir="+uploadParams[3] +
				";user=" + uploadParams[4] +
				";password=" + uploadParams[5] +
				";uploaddir=" + uploadParams[2];
	if (bidix.debugMode)
		sheader += ";debug=1";
	sheader += ";;\r\n"; 
	sheader += "\r\n" + "--" + boundary + "\r\n";
	sheader += "Content-disposition: form-data; name=\"userfile\"; filename=\""+uploadParams[1]+"\"\r\n";
	sheader += "Content-Type: text/html;charset=UTF-8" + "\r\n";
	sheader += "Content-Length: " + data.length + "\r\n\r\n";
	// compose trailer data
	var strailer = new String();
	strailer = "\r\n--" + boundary + "--\r\n";
	data = sheader + data + strailer;
	if (bidix.debugMode) alert("about to execute Http - POST on "+uploadParams[0]+"\n with \n"+data.substr(0,500)+ " ... ");
	var r = doHttp("POST",uploadParams[0],data,"multipart/form-data; ;charset=UTF-8; boundary="+boundary,uploadParams[4],uploadParams[5],localCallback,params,null);
	if (typeof r == "string")
		displayMessage(r);
	return r;
};

// same as Saving's updateOriginal but without convertUnicodeToUTF8 calls
bidix.upload.updateOriginal = function(original, posDiv)
{
	if (!posDiv)
		posDiv = locateStoreArea(original);
	if((posDiv[0] == -1) || (posDiv[1] == -1)) {
		alert(config.messages.invalidFileError.format([localPath]));
		return;
	}
	var revised = original.substr(0,posDiv[0] + startSaveArea.length) + "\n" +
				store.allTiddlersAsHtml() + "\n" +
				original.substr(posDiv[1]);
	var newSiteTitle = getPageTitle().htmlEncode();
	revised = revised.replaceChunk("<title"+">","</title"+">"," " + newSiteTitle + " ");
	revised = updateMarkupBlock(revised,"PRE-HEAD","MarkupPreHead");
	revised = updateMarkupBlock(revised,"POST-HEAD","MarkupPostHead");
	revised = updateMarkupBlock(revised,"PRE-BODY","MarkupPreBody");
	revised = updateMarkupBlock(revised,"POST-SCRIPT","MarkupPostBody");
	return revised;
};

//
// UploadLog
// 
// config.options.chkUploadLog :
//		false : no logging
//		true : logging
// config.options.txtUploadLogMaxLine :
//		-1 : no limit
//      0 :  no Log lines but UploadLog is still in place
//		n :  the last n lines are only kept
//		NaN : no limit (-1)

bidix.UploadLog = function() {
	if (!config.options.chkUploadLog) 
		return; // this.tiddler = null
	this.tiddler = store.getTiddler("UploadLog");
	if (!this.tiddler) {
		this.tiddler = new Tiddler();
		this.tiddler.title = "UploadLog";
		this.tiddler.text = "| !date | !user | !location | !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |";
		this.tiddler.created = new Date();
		this.tiddler.modifier = config.options.txtUserName;
		this.tiddler.modified = new Date();
		store.addTiddler(this.tiddler);
	}
	return this;
};

bidix.UploadLog.prototype.addText = function(text) {
	if (!this.tiddler)
		return;
	// retrieve maxLine when we need it
	var maxLine = parseInt(config.options.txtUploadLogMaxLine,10);
	if (isNaN(maxLine))
		maxLine = -1;
	// add text
	if (maxLine != 0) 
		this.tiddler.text = this.tiddler.text + text;
	// Trunck to maxLine
	if (maxLine >= 0) {
		var textArray = this.tiddler.text.split('\n');
		if (textArray.length > maxLine + 1)
			textArray.splice(1,textArray.length-1-maxLine);
			this.tiddler.text = textArray.join('\n');		
	}
	// update tiddler fields
	this.tiddler.modifier = config.options.txtUserName;
	this.tiddler.modified = new Date();
	store.addTiddler(this.tiddler);
	// refresh and notifiy for immediate update
	story.refreshTiddler(this.tiddler.title);
	store.notify(this.tiddler.title, true);
};

bidix.UploadLog.prototype.startUpload = function(storeUrl, toFilename, uploadDir,  backupDir) {
	if (!this.tiddler)
		return;
	var now = new Date();
	var text = "\n| ";
	var filename = bidix.basename(document.location.toString());
	if (!filename) filename = '/';
	text += now.formatString("0DD/0MM/YYYY 0hh:0mm:0ss") +" | ";
	text += config.options.txtUserName + " | ";
	text += "[["+filename+"|"+location + "]] |";
	text += " [[" + bidix.basename(storeUrl) + "|" + storeUrl + "]] | ";
	text += uploadDir + " | ";
	text += "[[" + bidix.basename(toFilename) + " | " +toFilename + "]] | ";
	text += backupDir + " |";
	this.addText(text);
};

bidix.UploadLog.prototype.endUpload = function(status) {
	if (!this.tiddler)
		return;
	this.addText(" "+status+" |");
};

//
// Utilities
// 

bidix.checkPlugin = function(plugin, major, minor, revision) {
	var ext = version.extensions[plugin];
	if (!
		(ext  && 
			((ext.major > major) || 
			((ext.major == major) && (ext.minor > minor))  ||
			((ext.major == major) && (ext.minor == minor) && (ext.revision >= revision))))) {
			// write error in PluginManager
			if (pluginInfo)
				pluginInfo.log.push("Requires " + plugin + " " + major + "." + minor + "." + revision);
			eval(plugin); // generate an error : "Error: ReferenceError: xxxx is not defined"
	}
};

bidix.dirname = function(filePath) {
	if (!filePath) 
		return;
	var lastpos;
	if ((lastpos = filePath.lastIndexOf("/")) != -1) {
		return filePath.substring(0, lastpos);
	} else {
		return filePath.substring(0, filePath.lastIndexOf("\\"));
	}
};

bidix.basename = function(filePath) {
	if (!filePath) 
		return;
	var lastpos;
	if ((lastpos = filePath.lastIndexOf("#")) != -1) 
		filePath = filePath.substring(0, lastpos);
	if ((lastpos = filePath.lastIndexOf("/")) != -1) {
		return filePath.substring(lastpos + 1);
	} else
		return filePath.substring(filePath.lastIndexOf("\\")+1);
};

bidix.initOption = function(name,value) {
	if (!config.options[name])
		config.options[name] = value;
};

//
// Initializations
//

// require PasswordOptionPlugin 1.0.1 or better
bidix.checkPlugin("PasswordOptionPlugin", 1, 0, 1);

// styleSheet
setStylesheet('.txtUploadStoreUrl, .txtUploadBackupDir, .txtUploadDir {width: 22em;}',"uploadPluginStyles");

//optionsDesc
merge(config.optionsDesc,{
	txtUploadStoreUrl: "Url of the UploadService script (default: store.php)",
	txtUploadFilename: "Filename of the uploaded file (default: in index.html)",
	txtUploadDir: "Relative Directory where to store the file (default: . (downloadService directory))",
	txtUploadBackupDir: "Relative Directory where to backup the file. If empty no backup. (default: ''(empty))",
	txtUploadUserName: "Upload Username",
	pasUploadPassword: "Upload Password",
	chkUploadLog: "do Logging in UploadLog (default: true)",
	txtUploadLogMaxLine: "Maximum of lines in UploadLog (default: 10)"
});

// Options Initializations
bidix.initOption('txtUploadStoreUrl','');
bidix.initOption('txtUploadFilename','');
bidix.initOption('txtUploadDir','');
bidix.initOption('txtUploadBackupDir','');
bidix.initOption('txtUploadUserName','');
bidix.initOption('pasUploadPassword','');
bidix.initOption('chkUploadLog',true);
bidix.initOption('txtUploadLogMaxLine','10');


// Backstage
merge(config.tasks,{
	uploadOptions: {text: "upload", tooltip: "Change UploadOptions and Upload", content: '<<uploadOptions>>'}
});
config.backstageTasks.push("uploadOptions");


//}}}
{{{
//URL do script de autenticação e upload
config.options.txtUploadStoreUrl = 'http://www.math.ist.utl.pt/~psoares/store.php';
//Nome relativo da directoria onde o ficheiro é guardado
config.options.txtUploadDir = '';
//Nome do ficheiro que é guardado remotamente
config.options.txtUploadFilename = 'MathSVG.html';
//Nome de uma directoria de backup remota
config.options.txtUploadBackupDir = '';
//Não guarda registos
config.options.chkUploadLog=false;
}}}
<div class='SVGgraph' options='width:300'>
 a=-2
 text([a,2],"$(A \\cap B) \\cup C$",{pos:"n"})
 text([a-1.8,1],"A")
 text([a+1.5,1],"B")
 text([a+0,-2.5],"C")
 setOptions({fill:"red"});
 arc({start:[a,0.866],end:[a,-0.866],radius:1})
 arc({start:[a,-0.866],end:[a,0.866],radius:1})
 circle([a,-0.866],1)
 setOptions({fill:"none"});
 circle([a-.5,0],1)
 circle([a+.5,0],1)
 a=2
 text([a,2],"$(A \\cup C) \\cap B$",{pos:"n"})
 text([a-1.8,1],"A")
 text([a+1.5,1],"B")
 text([a,-2.5],"C")
 setOptions({fill:"red"});
 arc({start:[a,0.866],end:[a,-0.866],radius:1})
 arc({start:[a,-0.866],end:[a,0.866],radius:1})
 arc({start:[a+1,-0.866],end:[a-.5,0],radius:1})
 arc({start:[a-.5,0],end:[a+1,-0.866],radius:1})
 setOptions({fill:"none"});
 circle([a,-0.866],1)
 circle([a-.5,0],1)
 circle([a+.5,0],1)
</div>
In this version of the plugin the syntax used to define SVG pictures was changed in order to get closer to standard HTML. Because of this there is no backward compatibility.

Any SVG picture should be enclosed with a DIV or SPAN tag, as following:
//{{{
<div class='SVGgraph' style='border: red 5px solid' options='scales:[-1.5,3.5,-.6,2], coords:"none"'>
 ...
</div>
//}}}
All style options (background color, border, position, etc) are now written in a standard CSS rule.
Note that setting the border parameters in {{{style}}} does not work if you use the SPAN tag. However, the following solution does work in any case: 
//{{{
<span class='SVGgraph' options="scales:[-1.5,3.5,-.6,2], coords:'none', border:'red 5px solid'">
 ...
</span>
//}}}
This is a  [[TiddlyWiki|http://www.tiddlywiki.com]] (version <<version>> ©2011 [[UnaMesa|http://www.unamesa.org]]). Um ~TiddlyWiki é uma excelente ferramenta para colocar //online// informação fragmentada de uma forma muito eficiente. According to its author, Jeremy Ruston:
>A ~TiddlyWiki is like a blog because it's divided up into neat little chunks, but it encourages you to read it by hyperlinking rather than sequentially: if you like, a non-linear blog analogue that binds the individual microcontent items into a cohesive whole.
Keep an eye on Firefox 3 implementation of ''foreignObject'' for ~MathML inclusion in SVG -- done