A live drawing on your own page
A two-line snippet of HTML can embed a drawing anywhere: a blog post, a class page, a wiki. Readers can drag its points but can't edit. It's as simple as embedding an image and only needs JavaScript.
The embed snippet
Pick any drawing of the gallery above, paste the snippet where you want it, and it plays. The script tag loads the player once per page, the element is the drawing.
The element can be any size: give it the width and height you want, and the drawing fits itself in. With no height it would be as tall as nothing, so say one.
A drawing of your own
Make it in Live Geometry, then take it with you in either of two ways.
- Export › Copy embed code puts the same snippet on the clipboard with the drawing itself written into the element, between a
<script type="text/x-livegeometry">tag and its end. Paste into any HTML. Nothing is fetched but the player, so this works in a page opened from a disk too. - Export › Save as .html writes a page of its own with the player inside: one file that plays from a USB stick, a shared folder, or an email attachment.
Or keep the drawing as a file beside your page, saved with Save as .lgf, and point at it: data-src="my-drawing.lgf". A file next to your page needs no permission to be read; one on another site plays only if that site allows it (see below).
Options
Attributes on the element, all optional. The two drawings below are the first two in use.
| Attribute | What it does |
|---|---|
data-src | The address of an .lgf to play, when the drawing is not written into the element. |
data-theme | light, dark, or auto (the reader's system setting, the default). The drawing keeps its own colors; the paper and the default styles follow the theme. |
data-wheel | zoom makes the mouse wheel zoom the drawing. By default it zooms only with Ctrl held, so a drawing in a post doesn't take the page's scrolling; pinching and a double click (zoom to fit) always work. |
data-fit | content fits the figures into the element instead of the view the drawing was saved with. |
data-font | A font family for the text in the drawing. By default it is your page's, so the drawing reads like the text around it. |
data-theme="dark" data-wheel="zoom"
data-theme="light" data-fit="content"
Good to know
Where the drawing can come from
The gallery's drawings are served for this at https://livegeometry.com/gallery/<Name>.lgf, and any page anywhere may fetch them. A drawing of your own next to your page is fine as well. A drawing on a third site plays only if that site sends the Access-Control-Allow-Origin header, which is the browser's rule, not ours: GitHub Pages and most static hosts do, and a file in a GitHub repository can be reached through raw.githubusercontent.com, which does too. A page opened from a disk can't fetch files at all, which is why the exported code carries the drawing inside.
Where it can't go
GitHub READMEs, issues and wikis strip scripts, as do most comment boxes. There, save a picture (Export › Save as .png) and link it to a page that holds the embed.
Fonts and emoji
The text in a drawing is drawn in your page's font, and the emoji some drawings use come from the reader's own device. The player itself is about 95 KB compressed, loaded once per page however many drawings it has.
Versions
The address /player/1/player.js names the player's major version. Fixes reach it as they are made; when the file format one day outgrows it, a /player/2/ starts and /player/1/ keeps playing what was pasted with it.
From a script
The player is a global, LiveGeometry. LiveGeometry.play(element, { src, theme, wheel, fit }) plays a drawing into an element you made, LiveGeometry.players holds every player on the page by element, and a player's applyTheme("dark"), fit() and load(text) do what their names say. The sun and moon in the corner of this page use the first two.