You are currently browsing the tag archive for the ‘svg’ tag.

So is in open beta, now works reasonably well on iPad and recent desktop browsers.  Android browser support coming sometime soon.

Heres a pic my 9yo created while testing things out on the iPad.. with the obligatory battle scene [ dad vs browser quirks ? ] :


Here’s a couple of sheets on how I like to present long multiplication…

Firstly a concrete rectangle where you can actually count the squares to satisfy yourself its right…


Then move to a more compact form, which still shows the rectangle grid, but not to scale..


This shows that lots of digits should not induce panic.. the same systematic approach works [ which is why computers can do multiplication so well ].

I think having the box grid is a nice way to remember where all the pieces come from [ single digit products ].  Also I think it really helps to use the blank grid spaces, rather than fill in every 0.

The lattice method is slightly more compact, but I think this box approach reminds students of whats really going on.

Thanks for all the emails and encouragement so far as I build this.

Enjoy, and let me know how your using GridMaths.

My 9 year old son has discovered Chess, after watching the movie “Searching for Bobby Fischer”.

We bought a chess set so we could play with some chess puzzles and strategies.. but we were a bit dismayed at the quality of the plastic pieces.  Anyway one thing led to another, and so I spent a couple days hacking up a web based Chess app.

The basics are there :

  • the board
  • piece movements
  • castling
  • loading puzzles in FEN format
  • chess move notation / SAN


As time allows I’ll gradually add the remaining features, such as :

  • en-passant for pawns, pawn promotion
  • check-detection for kings
  • pgn game import/export
  • design & share chess board puzzle

One of the reasons I decided to bite the bullet and do this, was so I can write a few articles on developing a board game in Javascript for young programmers [ my son has been enjoying the programming environment and tutorials on ] and also Id like to be able to design my own puzzle games and share them, as a good way to help young people learn basic moves and strategy.

In other news, Ive been fighting stockfish chess AI.. and it wins every time, except on the lowest setting.   But its been fun to take up the game again, so I can play against my son and answer some of his questions/attacks.


The other day I was really enjoying some Anatomy Physiology lectures on YouTube by Professor Marian Diamond, who is in her 80s and still fired up with plenty of passion for the topic.

I made some handwritten notes as I followed along with the lectures, but wanted to try out some other ways to visualise things.

3D anatomy in the browser

To get a feel for the placement of everything, I found it very handy to see things in 3D.  The only serious web based anatomy browser I could find is .. its pretty impressive running in chrome or firefox.  You can hide parts by anatomical system and drill down..  so you see only what your interested in.  Then there is a way to generate a public link,  to effectively save that view.

As an example, here is a 3D scene showing the heart, which you can rotate in 3D :

One of the things that works in these youtube lectures above is the simplified schematic diagrams she uses to show the essentials of whats going on.  When you look at real anatomy, there is so much detail you cant parse it all until you know the ‘lay of the land’.

SVG for lecture notes [ and interactive lessons ] ?

I’ve also been experimenting with SVG as a way to create notes with diagrams.. here is a diagram showing the two pumps of the heart [ click image for svg file ]:

This diagram took a bit long as I was being too picky about how it looks – I used Inkscape on Linux, which is reasonably feature rich and stable these days.  I also tried the web based editor svg-edit … its getting there, but the alpha was a bit unstable and the stable version didn’t have a spline tool as far as I could see.

For making ‘high-yield’ succinct summary notes it would be really nice to have a nested text tree widget – so you can make bullet points that are indented several levels [ click to hide/expand would be handy too, for review].

These tools are getting pretty close to something that you can use for science or medicine lecture notes where you need text and diagrams in a web-friendly open format – something a bit more diagrammatic / visual than a wiki.  SVG support is really improving with latest Android, and I think it was well supported previously on iPad/iPhone.

I think there’s a lot of scope to use SVG for interactive lessons – it plays well with javascript, so at minimum you can do things like step thru a sequence of diagrams to show a metabolic pathway or process.   This would be a good way to augment notes – you can hide labels of parts of the anatomy and even compare the answer and make a score for each review lesson.

Here’s a great example from

Viewing Molecules in the Browser

The other web based tool I have been really impressed with is the ChemDoodle web component that shows molecules in 3D using webGL in browser – proteins, amino acids etc – which you can manipulate with the mouse.  I found it more responsive than jMol, which is the most well known molecule viewer, implemented in Java.

Protein Ribbon Viewer demo

Molecule Viewer demo

Javascript, dammit!

These things should be done in Javascript from now on – its fast enough, theres good [ but not perfect] browser API support, and its a much nicer language.   The recent effort with GeoGebra in Javascript works well enough already to illustrate my point, and will be a great for teaching geometry and maths to a new generation of kids.

Custom UI

I see a lot of interest in custom UI for iPad.   There are wonderful interactive books such as Alice and Im sure well see some very interesting interactive comics and graphic novels come out for the platform this Christmas.

Some brands have a certain graphic look and feel that is distinctive and they want to preserve that instead of the Apple ‘native’ look.   Other clients want a native looking app done in HTML5 delivered faster than an approval process would allow.

I recently developed an iPad app for an US based startup company.  The app gathers medical data at the scene of an emergency, and the designer came up with some excellent visual motifs, mixed in with traditional native UI elements.

Ive tended to develop custom UI in native Cocoa until this point, but the technology has been there for a while, as evidenced by apples own PastryKit.  Now there are several good frameworks like jQTouch, Sencha and jQueryMobile, but more importantly one can google for the grab-bag of techniques and examples that showcase the power of accelerated webkit animations.

iPad Demo

For a clickable early version of the app, open this link in Safari on iPad or Safari on Mac – iPad Demo

[ chrome on Linux will also work, for example, as it too is webkit under the hood ]

As you can see Ive implemented boolean [ ON | OFF ] slide toggle switches using an alpha mask and webkit transitions – pretty much any native UI is doable.


I continue to enjoy the lisp-ness of Javascript.

Javascript + CSS + HTML divs + nice GPU accelerated animated transitions = superb prototyping environment.

The other win is that my code seems a _lot_ smaller than if I did this in Cocoa / Objective C.  I’m not knocking UIKit / iOS, the APIs are generally excellent.. but they are verbose in comparison.

The native look and feel and immediate response is achievable [ make sure you implement touchstart and don’t rely on the click event or your user will be waiting 250ms for the UI to respond… ]

Interesting times.


I prototype a number of techniques to deliver interactive floor maps.

Here is a floor plan of the main area of Melbourne Central, a popular shopping area in the CBD.  Created with SVG + javascript so will only run in Browsers that understand SVG.

Melbourne Central Map SVG

These kind of maps would be very useful navigating large Expos, so here are some demos…

Standard divs approach :

Home Garden Show

Fashion Exposed

SVG versions, for modern browsers only  :

Home Garden Show

Fashion Exposed


All in all SVG is an incredible format for these kinds of graphics, and I think well see a lot more interactive books, comics and StarTrek inspired custom UIs developed in SVG.   Its a sane way to deliver to iPhone, iPad and various Android screen sizes with  common code base and one set of graphics assets.

After many years of neglect and non-standards-compliance, I’m looking forward to seeing the upcoming IE9 release of Internet Explorer browser with accelerated graphics and native SVG support.  Graphic designers will be set free to create and developers will be empowered to push the boundaries of the web to the next level.

Some amazing javascript libraries are coming out now, which enable interactive math directly in the browser.

One of the most impressive is jsxGraph, from Bayreuth University, which is purpose built upon SVG for plotting mathematical functions.  See their wiki for superb demos.

On the jsxGraph blog, there is a video showing a construction being manipulated by touch on the iPhone – very cool.

Experimenting with their circles-on-circles web app, by sliding the parameters around I uncovered this delightful piece, which reminded me of those ornate calligraphy end-notes you see in olde books.

Its a lot of fun to experiment.  For the curious, the parameters of this specimen are : c1:0.51 f1:7 c2:0.32 f2:17

SVG coolness

I think SVG is the right way to go, and a more natural approach than using canvas [as I did for my interactive sine generator last week].

There’s no technical reason now why something as featured as GeoGebra or KGeo could not be implemented directly in the browser.. it just has to be done!

Geogebra is really nice, but I do prefer the simplicity of not having to download the java applet and approve it for access.  Each extra step supposedly halves the audience, and I want math to be interactive and accessible.

I’ve added a secondary ‘slave’ circle, which I think introduces the idea of Fourier series in a natural way.

The animation starts as before with a sine curve,  then you can add in the second circle by clicking ‘toggle’.

Click this picture to see the Javascript web animation :

I wanted to explain the math-magic of the circle generating the sine wave with a simple animation of a point rotating on the edge and the height matching the sine wave.

I had a look around but most of the math animations are Java applets which I find a bit top heavy, and this should be doable in Javascript.

This is what I came up with, [click to view animation] –

I tried several approaches to get this working, not perfectly happy with any of them, although I did get a basic demo up and running as you see above.

First approach was using SVG, but for some reason I had problems getting svg to appear at all in an html5 page… go figure, this should be simple.   In the process I was impressed by SVGEdit which is an early stage, usable if not polished, in browser SVG editor. cool.. I just couldnt get any of my pages to show svg.  Ill have another go when the frustration has been forgotten, its possibly some syntax glitch I missed.

I then tried RaphaelJS library which did work reasonably well.  Its a nice api.  Some things like animating along a path you get out of the box, which is nice.  After some basic success I did find myself scratching my head on how to rotate a path – and I’m not sure how to apply a rotate transformation to an item generally [which is a cool feature of SVG ].

Partial demo of sine wave animation implemented in Raphael here.  Animates quickly in Safari on mac, Chrome on mac, slightly choppy on Firefox on mac, and quite slow but functional on Safari iPod/webkit.

Wanting a bit more control over exact placement, I decided to try pure HTML5 Canvas rendering.  This worked well, was simpler to understand exact x,y pixel placement.  I haven’t solved a side issue which is that for some reason if I have the preferred HTML5 “<DOCTYPE html>” tag it ignores exact placement of div elements.. finding this side effect drove me nuts!   Im wondering if this is in the spec, it seems it would break a lot of code.

Anyway, layout of the animation was easy in HTML5 canvas.  See sine animation demo here.

It does seem to be busy drawing, and Id like to eliminate back flicker [which you’d normally do by drawing to back buffer, or having dirty regions].  Performs ok on desktop safari, firefox and chrome [which seems fastest of all the browsers].  Comes up on iPhone but animates slowly as you’d expect.

A faster approach might be to render the background into a separate layer and draw the dots and lines per frame, as its probably touching only 1 in 1000 of the total pixels.

Anyway, seems to be a promising way to get Math animations up and running, which fine tuning will improve.  See page source for Javascript, BSD licence, feel free to reuse.