Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Euclid Build Status JS.ORG

Euclidean geometry in javascript. Here's a demo; here's another one (mess with it by clicking "Play with the geometry background!" at the bottom).

NOTE: Still very preliminary / experimental.

git clone
cd euclid
npm install


Load It:

Add dist/geometry.css for the basic SVG styles.

<link rel="stylesheet" href="geometry.css">

Put an <svg> element somewhere.

<svg class="geometry-scene" viewbox="0 0 800 800"></svg>

Pull in the javascript, either as a node module...

var geom = require('euclid');

or a browser standalone(ish) script (depends on d3 to be loaded already).

<script src="js/vendor/d3.min.js"></script>
<script src="js/geometry.js"></script> <!-- exposes geom as a global -->

Use It:

And then

var scene = new geom.Scene({
  left: 0,
  top: 0,
  right: 1000,
  bottom: 1000
  .point('A', width/7*3, height/3) // add a couple of free points.
  .poinnt('B', width/7*5, height/3)
  .segment('S', 'A', 'B')

  // add circle centered at point 'A', with point 'B' on its circumference.
  .circle('M', 'A', 'B')
  .circle('N', 'B', 'A')

  // tag subsequent objects with string 'layer2', used by renderer to add
  // arbitrary CSS classes to svg objects.
  // let C and D be the two intersections of circles M and N
  .intersection('C', 'M', 'N', 0)
  .intersection('D', 'M', 'N', 1)
  .line('T', 'A', 'C')
  .segment('U', 'A', 'D')
  // let E be the intersection of line T and circle M that *isn't* equivalent to point C.
  .intersection('E', 'T', 'M', scene.isnt('C') )
  .segment('V', 'E', 'B')
  .intersection('F', 'V', 'U')
  .segment('W', 'F', 'C')
  .intersection('W', 'S')

// render using d3.
var render = geom.renderer(scene, document.querySelector('svg'));