Search IntMath
Close

450+ Math Lessons written by Math Professors and Teachers

5 Million+ Students Helped Each Year

1200+ Articles Written by Math Educators and Enthusiasts

Simplifying and Teaching Math for Over 23 Years

#### Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.

Home | Math Display Experiments | ASCIIsvg-IM.js Demo and Syntax

Page by Murray Bourne, IntMath.com. Last updated: 07 Apr 2018

# ASCIIsvg-IM.js Demo and Syntax

ASCIIsvg-IM.js is a lightweight javascript library that produces SVG-based math graphs with plain text function input (e.g. "3sin(5x)", rather than the normal javascript syntax of "3*Math.sin(5*x)").

ASCIIsvg-IM.js is a heavily modified version of Peter Jipsen's ASCIIsvg.js.

It's much smaller than the better-known JSXGraph, which also produces SVG math graphs. Here's a comparison:

ASCII​svg-IM.jsJSXGraph
Uncompressed28 KB902 KB
Compressed18 KB535 KB
Gzipped6 KB157 KB

But of course, ASCIIsvg-IM.js is nowhere near as sophisticated or versatile as JSXGraph.

## ASCIIsvg-IM.js demo

This page shows what ASCIIsvgIM.js can do and how to do it (the syntax). Much of it is based on some of Peter Jipsen's examples.

### Overview of the process

Currently, there are several default colors, stroke thicknesses and dot sizes. You can just go with those, or override them as the below examples demonstrate.

Note that if you change most variables, they will apply to all other following elements on the page. Therefore, you will see several examples of "setting back" the defaults.

TODO: A future revision will allow you to set color and size parameters for each element independently of others. But that's for a another day...

## Ellipses, squares and arcs

Here's the coode to produce the above graph.

Here's the code:

Here's the code:

The syntax:

Here's the code:

## Animations

This uses stroke-dasharray to significantly speed up the animation.

Frame rate:

The syntax:

## Vary parameter using a slider

This uses noUI-slider.js (a mobile-friendly slider library which is independent of ASCIIsvg-IM.js). We're only using one slider here. (See the full example at Quadratic Equations interactive graph.)

For the graph of the quadratic expression, y = ax2 + bx + c, we have:

Here's the code:

## Interactives using ASCIIsvg-IM.js

Domain and Range interactive applet (with noUi-slider)

Interactive Quadratic Function Graph (with noUi-slider)

Applications of Radian Measure (with noUi-slider)

Graphs of y = a sin x and y = a cos x (with noUi-slider)

Graphs of y = a sin bx and y = a cos bx (with noUi-slider)

Graphs of y = a sin(bx+c) and y = a cos(bx+c) (with noUi-slider)

Graphs of tan, cot, sec and csc (with noUi-slider)

Graphical explanation of multiplying and dividing complex numbers (with noUi-slider)

Impedance and Phase Angle: Application of Complex Numbers (with noUi-slider)

Curves in Polar Coordinates (with noUi-slider)

Calculus Concepts First Principles Applet (with noUi-slider)

The Derivative from First Principles (with noUi-slider)

Derivative interactive graphs - polynomials (with noUi-slider)

Differentiation interactive applet - products and quotients (with noUi-slider)

Newton's Method Interactive Graph (with noUi-slider)

Curvilinear Motion (anim)

Related Rates (anim)

Differentiation interactive applet - trigonometric functions (with noUi-slider)

Riemann Sums (with noUi-slider)

Fundamental Theorem of Calculus Applet (with noUi-slider)

Riemann Sums - Discontinuous Functions (with noUi-slider)

Evolute of a curve (anim)

Animated Moore Curve (anim)

Witch of Agnesi (anim)

Lemniscate of Bernoulli (anim)

## Related page

You may also be interested in svgPHPGrapher Syntax Examples. svgPHPGrapher is a highly modified PHP port of ASCIIsvg.js and produces static SVG math graphs with no javascript.