diff --git a/build/Geometrize.js b/build/Geometrize.js
index 42a01f9..51d177a 100644
--- a/build/Geometrize.js
+++ b/build/Geometrize.js
@@ -2,14 +2,14 @@
 *   Geometrize
 *   computational geometry and rendering library for JavaScript
 *
-*   @version 0.2.0 (2022-12-02 20:56:48)
+*   @version 0.2.0 (2022-12-02 23:51:44)
 *   https://github.com/foo123/Geometrize
 *
 **//**
 *   Geometrize
 *   computational geometry and rendering library for JavaScript
 *
-*   @version 0.2.0 (2022-12-02 20:56:48)
+*   @version 0.2.0 (2022-12-02 23:51:44)
 *   https://github.com/foo123/Geometrize
 *
 **/
@@ -617,6 +617,8 @@ var Primitive = makeClass(null, merge(null, {
     toSVGPath: function(svg) {
         return arguments.length ? svg : '';
     },
+    toCanvas: function(ctx) {
+    },
     toTex: function() {
         return '\\text{Primitive}';
     },
@@ -1509,7 +1511,7 @@ var Bezier1 = makeClass(Bezier, {
     },
     toBezier3: function() {
         return [
-        [this.f(0), this.f(1/3), this.f(2/3), this.f(1)]
+        [this.f(0), this.f(0.5), this.f(0.5), this.f(1)]
         ];
     },
     toSVG: function(svg) {
@@ -1532,6 +1534,15 @@ var Bezier1 = makeClass(Bezier, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var p1 = this._points[0], p2 = this._points[1];
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.moveTo(p1.x, p1.y);
+        ctx.lineTo(p2.x, p2.y);
+        ctx.stroke();
+    },
     toTex: function() {
         var p1 = this.start, p2 = this.end;
         return '\\text{Line: }'+signed(p2.y - p1.y, false)+' \\cdot x '+signed(p1.x - p2.x)+' \\cdot y '+signed(p2.x*p1.y - p1.x*p2.y)+'\\text{, }'+Str(stdMath.min(p1.x, p2.x))+' \\le x \\le '+Str(stdMath.max(p1.x, p2.x))+'\\text{, }'+Str(stdMath.min(p1.y, p2.y))+' \\le y \\le '+Str(stdMath.max(p1.y, p2.y));
@@ -1753,6 +1764,15 @@ var Polyline = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var p = this._points, n = p.length;
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.moveTo(p[0].x, p[0].y);
+        for (var i=1; i<n; ++i) ctx.lineTo(p[i].x, p[i].y);
+        ctx.stroke();
+    },
     toTex: function() {
         var lines = this.lines;
         return '\\text{Polyline: }\\begin{cases}&'+lines.map(Tex).join('\\\\&')+'\\end{cases}';
@@ -2099,6 +2119,16 @@ var Arc = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var c = this.center, rx = this.rX, ry = this.rY,
+            a = rad(this.angle), t = this.theta, d = this.dtheta, fs = !!this.sweep;
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.ellipse(c.x, c.x, rx, ry, a, t, t+d, fs);
+        ctx.stroke();
+        //ctx.closePath();
+    },
     toTex: function() {
         return '\\text{Arc: }\\left('+[Tex(this.start), Tex(this.end), Str(this.radiusX), Str(this.radiusY), Str(this.angle)+'\\text{°}', Str(this.largeArc ? 1 : 0), Str(this.sweep ?1 : 0)].join(',')+'\\right)';
     },
@@ -2315,6 +2345,15 @@ var Polygon = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var p = this._lines, n = p.length;
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.moveTo(p[0].x, p[0].y);
+        for (var i=1; i<n; ++i) ctx.lineTo(p[i].x, p[i].y);
+        ctx.stroke();
+    },
     toTex: function() {
         return '\\text{Polygon: }'+'\\left(' + this.vertices.map(Tex).join(',') + '\\right)';
     },
@@ -2495,7 +2534,7 @@ var Circle = makeClass(Curve, {
     toBezier3: function() {
         var r = this.radius,
             c = this.center,
-            b = function(cx, cy, rx, ry, rev) {
+            b3 = function(cx, cy, rx, ry, rev) {
                 return rev ? [
                 {x:cx, y:cy - ry},
                 {x:cx - 0.55228*rx, y:cy - ry},
@@ -2510,10 +2549,10 @@ var Circle = makeClass(Curve, {
             }
         ;
         return [
-        b(c.x, c.y, -r, r),
-        b(c.x, c.y, r, r, 1),
-        b(c.x, c.y, r, -r),
-        b(c.x, c.y, -r, -r, 1)
+        b3(c.x, c.y, -r, r, 0),
+        b3(c.x, c.y, r, r, 1),
+        b3(c.x, c.y, r, -r, 0),
+        b3(c.x, c.y, -r, -r, 1)
         ];
     },
     toSVG: function(svg) {
@@ -2535,6 +2574,15 @@ var Circle = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var c = this.center, r = this.radius;
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.arc(c.x, c.x, r, 0, TWO_PI);
+        ctx.stroke();
+        //ctx.closePath();
+    },
     toTex: function() {
         var c = this.center, r = Str(this.radius);
         return '\\text{Circle: }\\left|\\begin{pmatrix}\\frac{x'+signed(-c.x)+'}{'+r+'}\\\\\\frac{y'+signed(-c.y)+'}{'+r+'}\\end{pmatrix}\\right|^2 = 1';
@@ -2786,6 +2834,33 @@ var Ellipse = makeClass(Curve, {
         }
         return false;
     },
+    toBezier3: function() {
+        var rx = this.radiusX,
+            ry = this.radiusY,
+            c = this.center,
+            cs = this.cs,
+            b3 = function(cx, cy, rx, ry, cos, sin, rev) {
+                var x1 = -rx, y1 = 0, x2 = -0.55228*rx, y2 = -0.55228*ry, x3 = 0, y3 = -ry;
+                return rev ? [
+                {x:cx + cos*x3 - sin*y3, y:cy + sin*x3 + cos*y3},
+                {x:cx + cos*x2 - sin*y3, y:cy + sin*x2 + cos*y3},
+                {x:cx + cos*x1 - sin*y2, y:cy + sin*x1 + cos*y2},
+                {x:cx + cos*x1 - sin*y1, y:cy + sin*x1 + cos*y1}
+                ] : [
+                {x:cx + cos*x1 - sin*y1, y:cy + sin*x1 + cos*y1},
+                {x:cx + cos*x1 - sin*y2, y:cy + sin*x1 + cos*y2},
+                {x:cx + cos*x2 - sin*y3, y:cy + sin*x2 + cos*y3},
+                {x:cx + cos*x3 - sin*y3, y:cy + sin*x3 + cos*y3}
+                ];
+            }
+        ;
+        return [
+        b3(c.x, c.y, -rx, ry, cs[0], cs[1], 0),
+        b3(c.x, c.y, rx, ry, cs[0], cs[1], 1),
+        b3(c.x, c.y, rx, -ry, cs[0], cs[1], 0),
+        b3(c.x, c.y, -rx, -ry, cs[0], cs[1], 1)
+        ];
+    },
     toSVG: function(svg) {
         var c = this.center,
             rX = this.radiusX,
@@ -2811,6 +2886,15 @@ var Ellipse = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var c = this.center, rx = this.radiusX, ry = this.radiusY, a = rad(this.angle);
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.ellipse(c.x, c.x, rx, ry, a, 0, TWO_PI);
+        ctx.stroke();
+        //ctx.closePath();
+    },
     toTex: function() {
         var a = Str(this.angle)+'\\text{°}',
             c = this.center, rX = Str(this.radiusX), rY = Str(this.radiusY);
@@ -2926,6 +3010,7 @@ var Plane = makeClass(null, {
             svg = null,
             svgEl = null,
             objects = null,
+            intersections = null,
             isChanged = true,
             render, raf;
 
@@ -2984,6 +3069,24 @@ var Plane = makeClass(null, {
             }
             return self;
         };
+        self.getIntersections = function() {
+            if (!objects || !objects.length) return [];
+            if (isChanged || !intersections)
+            {
+                intersections = [];
+                for (var k,i,j=0,n=objects.length; j<n; ++j)
+                {
+                    for (k=j+1; k<n; ++k)
+                    {
+                        i = objects[j].intersects(objects[k]);
+                        if (i) intersections.push.apply(intersections, i);
+                    }
+                }
+            }
+            return intersections ? intersections.map(function(p) {
+                return p.clone();
+            }) : [];
+        };
         self.dispose = function() {
             if (isBrowser && svg && svg.parentNode) svg.parentNode.removeChild(svg);
             if (isBrowser) window.cancelAnimationFrame(raf);
@@ -2994,6 +3097,8 @@ var Plane = makeClass(null, {
         };
         self.toSVG = function() {
         };
+        self.toCanvas = function() {
+        };
         render = function render() {
             if (!objects) return;
             if (!svg)
@@ -3035,7 +3140,9 @@ var Plane = makeClass(null, {
     dispose: null,
     add: null,
     remove: null,
-    toSVG: null
+    getIntersections: null,
+    toSVG: null,
+    toCanvas: null
 });
 // ---- utilities -----
 function is_strictly_zero(x)
diff --git a/src/Arc.js b/src/Arc.js
index 0963982..05d6755 100644
--- a/src/Arc.js
+++ b/src/Arc.js
@@ -336,6 +336,16 @@ var Arc = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var c = this.center, rx = this.rX, ry = this.rY,
+            a = rad(this.angle), t = this.theta, d = this.dtheta, fs = !!this.sweep;
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.ellipse(c.x, c.x, rx, ry, a, t, t+d, fs);
+        ctx.stroke();
+        //ctx.closePath();
+    },
     toTex: function() {
         return '\\text{Arc: }\\left('+[Tex(this.start), Tex(this.end), Str(this.radiusX), Str(this.radiusY), Str(this.angle)+'\\text{°}', Str(this.largeArc ? 1 : 0), Str(this.sweep ?1 : 0)].join(',')+'\\right)';
     },
diff --git a/src/Circle.js b/src/Circle.js
index fa920fc..b6594c2 100644
--- a/src/Circle.js
+++ b/src/Circle.js
@@ -171,7 +171,7 @@ var Circle = makeClass(Curve, {
     toBezier3: function() {
         var r = this.radius,
             c = this.center,
-            b = function(cx, cy, rx, ry, rev) {
+            b3 = function(cx, cy, rx, ry, rev) {
                 return rev ? [
                 {x:cx, y:cy - ry},
                 {x:cx - 0.55228*rx, y:cy - ry},
@@ -186,10 +186,10 @@ var Circle = makeClass(Curve, {
             }
         ;
         return [
-        b(c.x, c.y, -r, r),
-        b(c.x, c.y, r, r, 1),
-        b(c.x, c.y, r, -r),
-        b(c.x, c.y, -r, -r, 1)
+        b3(c.x, c.y, -r, r, 0),
+        b3(c.x, c.y, r, r, 1),
+        b3(c.x, c.y, r, -r, 0),
+        b3(c.x, c.y, -r, -r, 1)
         ];
     },
     toSVG: function(svg) {
@@ -211,6 +211,15 @@ var Circle = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var c = this.center, r = this.radius;
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.arc(c.x, c.x, r, 0, TWO_PI);
+        ctx.stroke();
+        //ctx.closePath();
+    },
     toTex: function() {
         var c = this.center, r = Str(this.radius);
         return '\\text{Circle: }\\left|\\begin{pmatrix}\\frac{x'+signed(-c.x)+'}{'+r+'}\\\\\\frac{y'+signed(-c.y)+'}{'+r+'}\\end{pmatrix}\\right|^2 = 1';
diff --git a/src/Ellipse.js b/src/Ellipse.js
index cd24059..7707ca2 100644
--- a/src/Ellipse.js
+++ b/src/Ellipse.js
@@ -241,6 +241,33 @@ var Ellipse = makeClass(Curve, {
         }
         return false;
     },
+    toBezier3: function() {
+        var rx = this.radiusX,
+            ry = this.radiusY,
+            c = this.center,
+            cs = this.cs,
+            b3 = function(cx, cy, rx, ry, cos, sin, rev) {
+                var x1 = -rx, y1 = 0, x2 = -0.55228*rx, y2 = -0.55228*ry, x3 = 0, y3 = -ry;
+                return rev ? [
+                {x:cx + cos*x3 - sin*y3, y:cy + sin*x3 + cos*y3},
+                {x:cx + cos*x2 - sin*y3, y:cy + sin*x2 + cos*y3},
+                {x:cx + cos*x1 - sin*y2, y:cy + sin*x1 + cos*y2},
+                {x:cx + cos*x1 - sin*y1, y:cy + sin*x1 + cos*y1}
+                ] : [
+                {x:cx + cos*x1 - sin*y1, y:cy + sin*x1 + cos*y1},
+                {x:cx + cos*x1 - sin*y2, y:cy + sin*x1 + cos*y2},
+                {x:cx + cos*x2 - sin*y3, y:cy + sin*x2 + cos*y3},
+                {x:cx + cos*x3 - sin*y3, y:cy + sin*x3 + cos*y3}
+                ];
+            }
+        ;
+        return [
+        b3(c.x, c.y, -rx, ry, cs[0], cs[1], 0),
+        b3(c.x, c.y, rx, ry, cs[0], cs[1], 1),
+        b3(c.x, c.y, rx, -ry, cs[0], cs[1], 0),
+        b3(c.x, c.y, -rx, -ry, cs[0], cs[1], 1)
+        ];
+    },
     toSVG: function(svg) {
         var c = this.center,
             rX = this.radiusX,
@@ -266,6 +293,15 @@ var Ellipse = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var c = this.center, rx = this.radiusX, ry = this.radiusY, a = rad(this.angle);
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.ellipse(c.x, c.x, rx, ry, a, 0, TWO_PI);
+        ctx.stroke();
+        //ctx.closePath();
+    },
     toTex: function() {
         var a = Str(this.angle)+'\\text{°}',
             c = this.center, rX = Str(this.radiusX), rY = Str(this.radiusY);
diff --git a/src/Line.js b/src/Line.js
index 583a461..6d3cbf8 100644
--- a/src/Line.js
+++ b/src/Line.js
@@ -184,7 +184,7 @@ var Bezier1 = makeClass(Bezier, {
     },
     toBezier3: function() {
         return [
-        [this.f(0), this.f(1/3), this.f(2/3), this.f(1)]
+        [this.f(0), this.f(0.5), this.f(0.5), this.f(1)]
         ];
     },
     toSVG: function(svg) {
@@ -207,6 +207,15 @@ var Bezier1 = makeClass(Bezier, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var p1 = this._points[0], p2 = this._points[1];
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.moveTo(p1.x, p1.y);
+        ctx.lineTo(p2.x, p2.y);
+        ctx.stroke();
+    },
     toTex: function() {
         var p1 = this.start, p2 = this.end;
         return '\\text{Line: }'+signed(p2.y - p1.y, false)+' \\cdot x '+signed(p1.x - p2.x)+' \\cdot y '+signed(p2.x*p1.y - p1.x*p2.y)+'\\text{, }'+Str(stdMath.min(p1.x, p2.x))+' \\le x \\le '+Str(stdMath.max(p1.x, p2.x))+'\\text{, }'+Str(stdMath.min(p1.y, p2.y))+' \\le y \\le '+Str(stdMath.max(p1.y, p2.y));
diff --git a/src/Plane.js b/src/Plane.js
index e3ae123..bc88415 100644
--- a/src/Plane.js
+++ b/src/Plane.js
@@ -6,6 +6,7 @@ var Plane = makeClass(null, {
             svg = null,
             svgEl = null,
             objects = null,
+            intersections = null,
             isChanged = true,
             render, raf;
 
@@ -64,6 +65,24 @@ var Plane = makeClass(null, {
             }
             return self;
         };
+        self.getIntersections = function() {
+            if (!objects || !objects.length) return [];
+            if (isChanged || !intersections)
+            {
+                intersections = [];
+                for (var k,i,j=0,n=objects.length; j<n; ++j)
+                {
+                    for (k=j+1; k<n; ++k)
+                    {
+                        i = objects[j].intersects(objects[k]);
+                        if (i) intersections.push.apply(intersections, i);
+                    }
+                }
+            }
+            return intersections ? intersections.map(function(p) {
+                return p.clone();
+            }) : [];
+        };
         self.dispose = function() {
             if (isBrowser && svg && svg.parentNode) svg.parentNode.removeChild(svg);
             if (isBrowser) window.cancelAnimationFrame(raf);
@@ -74,6 +93,8 @@ var Plane = makeClass(null, {
         };
         self.toSVG = function() {
         };
+        self.toCanvas = function() {
+        };
         render = function render() {
             if (!objects) return;
             if (!svg)
@@ -115,5 +136,7 @@ var Plane = makeClass(null, {
     dispose: null,
     add: null,
     remove: null,
-    toSVG: null
+    getIntersections: null,
+    toSVG: null,
+    toCanvas: null
 });
\ No newline at end of file
diff --git a/src/Polygon.js b/src/Polygon.js
index 8b78a9b..76a2c7f 100644
--- a/src/Polygon.js
+++ b/src/Polygon.js
@@ -206,6 +206,15 @@ var Polygon = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var p = this._lines, n = p.length;
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.moveTo(p[0].x, p[0].y);
+        for (var i=1; i<n; ++i) ctx.lineTo(p[i].x, p[i].y);
+        ctx.stroke();
+    },
     toTex: function() {
         return '\\text{Polygon: }'+'\\left(' + this.vertices.map(Tex).join(',') + '\\right)';
     },
diff --git a/src/Polyline.js b/src/Polyline.js
index dd07ae1..821c0ee 100644
--- a/src/Polyline.js
+++ b/src/Polyline.js
@@ -210,6 +210,15 @@ var Polyline = makeClass(Curve, {
             'style': [this.style.toSVG(), this.style.isChanged()]
         }, svg) : path;
     },
+    toCanvas: function(ctx) {
+        var p = this._points, n = p.length;
+        ctx.beginPath();
+        ctx.lineWidth = this.style['stroke-width'];
+        ctx.strokeStyle = this.style['stroke'];
+        ctx.moveTo(p[0].x, p[0].y);
+        for (var i=1; i<n; ++i) ctx.lineTo(p[i].x, p[i].y);
+        ctx.stroke();
+    },
     toTex: function() {
         var lines = this.lines;
         return '\\text{Polyline: }\\begin{cases}&'+lines.map(Tex).join('\\\\&')+'\\end{cases}';
diff --git a/src/Primitive.js b/src/Primitive.js
index 223f824..6a2d2b7 100644
--- a/src/Primitive.js
+++ b/src/Primitive.js
@@ -84,6 +84,8 @@ var Primitive = makeClass(null, merge(null, {
     toSVGPath: function(svg) {
         return arguments.length ? svg : '';
     },
+    toCanvas: function(ctx) {
+    },
     toTex: function() {
         return '\\text{Primitive}';
     },
diff --git a/test/intersect.html b/test/intersect.html
new file mode 100644
index 0000000..5524d4d
--- /dev/null
+++ b/test/intersect.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html><head>
+
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<title>Geometrize Intersections</title>
+<style type="text/css">
+#container {
+    position: relative;
+    width: 100%;
+    height: 1000px;
+    padding: 0;
+    margin: 0 auto;
+    overflow: visible;
+}
+#button {
+    position: relative;
+    display: block;
+    padding: 8px 12px;
+    background: white;
+    color: black;
+    border: 1px solid #676767;
+    border-radius: 8px;
+    cursor: pointer;
+    margin: 1px;
+}
+#button:hover {
+    border-width: 2px;
+    margin: 0;
+}
+</style>
+</head><body>
+<h1>Geometrize Intersections</h1>
+<button id="button">find intersections</button>
+<div id="container"></div>
+<script src="../build/Geometrize.js"></script>
+<script>
+"use strict";
+(function() {
+    const {Plane, Ellipse, Circle, Arc, Line} = Geometrize;
+    const plane = Plane(document.getElementById('container'), 300, 300);
+    const ellipse = Ellipse([40,40], 30, 10, -45);
+    const circle = Circle([30,30], 20);
+    const arc = Arc([100,100], [170,90], 30, 10, 30, 0, 1);
+    const line1 = Line([20,20], [60,60]);
+    const line2 = Line([50,2], [20,70]);
+    const line3 = Line([60,160], [300,0]);
+    const line4 = Line([60,120], [300,-40]);
+    let intersections = [];
+
+    line1.style['stroke'] = 'blue';
+    line2.style['stroke'] = 'green';
+    line3.style['stroke'] = 'orange';
+    line4.style['stroke'] = 'cyan';
+    plane.add(line1);
+    plane.add(line2);
+    plane.add(line3);
+    plane.add(line4);
+    plane.add(ellipse);
+    plane.add(circle);
+    plane.add(arc);
+    document.getElementById('button').addEventListener('click', () => {
+        intersections.forEach(p => {
+            plane.remove(p);
+            p.dispose();
+        });
+        intersections = plane.getIntersections();
+        intersections.forEach(p => {
+            p.style['stroke'] = 'red';
+            p.style['stroke-width'] = 2;
+            plane.add(p);
+        });
+    }, false);
+    /*
+    let dx = 12, dy = 1;
+    setTimeout(function animate() {
+        if (0 > line1.start.x+dx || line1.start.x+dx > plane.width) dx = -dx;
+        if (0 > line1.start.y+dy || line1.start.y+dy > plane.height) dy = -dy;
+        line1.start.x += dx;
+        line1.start.y += dy;
+        line1.end.x += dx;
+        line1.end.y += dy;
+        setTimeout(animate, 500);
+    }, 500);*/
+})();
+</script>
+</body></html>
diff --git a/test/test.html b/test/test.html
deleted file mode 100644
index cd787b0..0000000
--- a/test/test.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html><head>
-
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-<title>Geometrize</title>
-<style type="text/css">
-#test {
-    position: relative;
-    width: 100%;
-    height: 1000px;
-    padding: 0;
-    margin: 0 auto;
-    overflow: visible;
-}
-</style>
-</head><body>
-<h1>Geometrize</h1>
-<div id="test"></div>
-<script src="../build/Geometrize.js"></script>
-<script>
-"use strict";
-(function() {
-    var G = Geometrize;
-    var plane = G.Plane(document.getElementById('test'), 300, 300);
-    var ellipse = G.Ellipse([40,40], 30, 10, -45);
-    var circle = G.Circle([30,30], 20);
-    var arc = G.Arc([100,100], [170,90], 30, 10, 30, 0, 1);
-    var line = G.Line([20,20], [60,60]);
-    var line2 = G.Line([50,2], [20,70]);
-    var line3 = G.Line([60,160], [300,0]);
-    var line4 = G.Line([60,120], [300,-40]);
-    var dx = 12, dy = 1;
-    var i1 = line.intersects(ellipse),
-        i2 = line2.intersects(ellipse),
-        i3 = line.intersects(circle),
-        i4 = line2.intersects(circle),
-        i5 = ellipse.intersects(circle),
-        i6 = line.intersects(line2),
-        i7 = line3.intersects(arc),
-        i8 = line4.intersects(arc)
-    ;
-    var intersections = [].concat(i1 ? i1 : []).concat(i2 ? i2 : []).concat(i3 ? i3 : []).concat(i4 ? i4 : []).concat(i5 ? i5 : []).concat(i6 ? i6 : []).concat(i7 ? i7 : []).concat(i8 ? i8 : []);
-
-    line.style['stroke'] = 'blue';
-    line2.style['stroke'] = 'green';
-    line3.style['stroke'] = 'orange';
-    line4.style['stroke'] = 'cyan';
-    plane.add(line);
-    plane.add(line2);
-    plane.add(line3);
-    plane.add(line4);
-    plane.add(ellipse);
-    plane.add(circle);
-    plane.add(arc);
-    intersections.forEach(function(p) {
-        p.style['stroke'] = 'red';
-        p.style['stroke-width'] = 2;
-        plane.add(p);
-    });
-    /*setTimeout(function animate() {
-        if (0 > line.start.x+dx || line.start.x+dx > plane.width) dx = -dx;
-        if (0 > line.start.y+dy || line.start.y+dy > plane.height) dy = -dy;
-        line.start.x += dx;
-        line.start.y += dy;
-        line.end.x += dx;
-        line.end.y += dy;
-        setTimeout(animate, 500);
-    }, 500);*/
-})();
-</script>
-</body></html>
diff --git a/test/tween.html b/test/tween.html
index d79f607..f31a6c3 100644
--- a/test/tween.html
+++ b/test/tween.html
@@ -3,9 +3,9 @@
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-<title>Geometrize</title>
+<title>Geometrize Tween</title>
 <style type="text/css">
-#test {
+#container {
     position: relative;
     width: 100%;
     height: 1000px;
@@ -13,22 +13,39 @@
     margin: 0 auto;
     overflow: visible;
 }
+#button {
+    position: relative;
+    display: block;
+    padding: 8px 12px;
+    background: white;
+    color: black;
+    border: 1px solid #676767;
+    border-radius: 8px;
+    cursor: pointer;
+    margin: 1px;
+}
+#button:hover {
+    border-width: 2px;
+    margin: 0;
+}
 </style>
 </head><body>
-<h1>Geometrize</h1>
-<button id="animate">start tween</button>
-<div id="test"></div>
+<h1>Geometrize Tween</h1>
+<button id="button">start tween</button>
+<div id="container"></div>
 <script src="../build/Geometrize.js"></script>
 <script>
 "use strict";
 (function() {
-    var G = Geometrize, r = 50, cx = 100, cy = 100;
-    var plane = G.Plane(document.getElementById('test'), 300, 300);
-    var circle = G.Circle([cx,cy], r);
-    var square = G.Polygon([[cx+r,cy],[cx+r,cy-r],[cx,cy-r],[cx-r,cy-r],[cx-r,cy],[cx-r,cy+r],[cx,cy+r],[cx+r,cy+r]]);
-    var tween = G.Tween(circle, square, 1000);
+    const {Plane, Tween, Polygon, Ellipse, Circle} = Geometrize,
+        r = 50, rx = 50, ry = 20, cx = 100, cy = 100;
+    const plane = Plane(document.getElementById('container'), 300, 300);
+    const circle = Circle([cx,cy], r);
+    //const ellipse = Ellipse([cx, cy], rx, ry, -30);
+    const square = Polygon([[cx+r,cy],[cx+r,cy-r],[cx,cy-r],[cx-r,cy-r],[cx-r,cy],[cx-r,cy+r],[cx,cy+r],[cx+r,cy+r]]);
+    const tween = Tween(circle, square, 1000);
     plane.add(tween);
-    document.getElementById('animate').addEventListener('click', function(evt) {
+    document.getElementById('button').addEventListener('click', () => {
         tween.rewind().start();
     }, false);
 })();