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


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 son is working on some LCM word problems on Khanacademy.  LCM is short for “Least Common Multiple”, this KA vid explains it pretty well.

Basically the idea is to take two different measuring rods of two different lengths, start at the same place and keep measuring out lengths of each until the ends match up exactly : the first time this happens is at the LCM.

Easier to see than explain, especially if you get kids to experiment by putting rulers end to end, its kind of a nice little discovery, and the kind of open exploration that gives you the cool math-buzz when you discover something yourself.

I had fun doing a couple of these in GridMaths…


One nice thing is you can go step by step and see the rulers being added as they chase each other, with the ends not matching.. each team trying to win the race, each one getting ahead for a while..until the grand finale when…  ahh, its a dead heat !  :]

I guess the potential with a software tool, rather than paper, is that you could potentially have Cuisenaire measuring rods of any length [ a set of the first 50 primes would be a nice grab bag of tricks ] … and you could get LCM for larger numbers by just laying down more grid and scrolling to the right.  Its early days, so GridMaths doesn’t have this feature yet.. but I really like the fact that its open to doing things like this.

Prime Cuisenaire Rods anyone ?

When I was a kid there was this class where each student prepared their very own ice-cream container full of counting items – marbles, colored buttons, hexagonal Meccano nuts, etc. Somehow the teacher sold us on ‘owning’ and preparing our own stash, and I was very proud of sneaking in two tiny model mini cars and a couple of cool shells I picked up from the beach.

I also remember those lengths of wood in various colors used for counting/measuring things. These “Cuisenaire Rods” are magic, you can pick up a set on eBay from $10 to $15, or improvise with flat Lego units of different lengths and colors if you have those.

It would be unconscionable of me to not include this staple of Western math diet, so I give you a peak at Cuisinaire Rods in GridMaths.  I hope you like the spicy Mexican color scheme :


Simple things, but these can be a very tactile way of developing a feel for fractions and division.   They lead into strange discoveries, like the fact that some numbers can’t be made exactly from repeats of smaller lengths… prime numbers !


A special note to those of you who have taken time to read my experiments, and egg me on with your comments and feedback – your support is so important to me and my son, we heart you !

Just added a color palette to GridMaths, so it now has rectangles, lines, ellipses in few simple colors and weights.  The idea is to help make diagrams clearer, and help with Venn diagrams and other cases where you want to group things together.

Heres a grid sheet comparing fractions : 2/3 and 4/5 … then we show the product and sum using the same visual representation.


If you look carefully, you may notice that I ‘abuse’ the grid in that each grid square is 1/5 high and 1/6 wide – so a 1 unit x 1 unit square is actually 6×5 grid squares.  I think this is a legal abuse, in that we often graph things with different x and y axis scales.

The alternative is to have a resizeable non-square grid.. which I think creates too much complexity for not much gain.  The philosophy of GridMaths is “keep it simple”, so you can do the basics quickly and easily.   I used to think more features = more power = better, but after my son showed me the Minecraft game, and all the cool things people have built with it, I changed my mind about this.  I kept thinking.. why is Minecraft so popular, when you can do all that and more in Blender ?  Blender is a superb free 3D modelling package, which like all powerful modelling packages takes a while to become proficient at.  So, it dawned on me that Minecraft is so brilliant because it brings down the barrier to entry, and makes the 80% of things you need to do to make a world, really easy and quick for everyone.

So I’m adding the most useful things to GridMaths in a way that keeps it really simple.  Its not an algebra system, it most likely wont have handwriting recognition… but it should be a really fast way for math teachers to make Math diagrams and for students to do a wide range of worked Math problems, replacing grid paper for that 80% of tasks and adding some nice features.   Its kind of like an infinite supply of grid paper, that weights nothing and can be erased and replayed, and saved for later use  And.. you can step forward and back thru your edits and change stuff, and students can step thru a worked problem.  And you have counting beans and … :-]

Just wanted to share a small ‘teaser’ from a project I’m really excited about,

I’ve just finished adding support for the buttons keyboard which lets you make cool counting lessons for younger kids, so here’s a screenshot teaser to enjoy before we go live with the beta site in a few days :


If you haven’t guessed already from the above pic, the idea of is to have an interactive quad grid paper environment in your browser or tablet, where you can work out math problems like long division, multiplication and so on.

My 9yo son has been doing lots of KhanAcademy exercises, working his way up to multiplying decimals..[ which Im pretty chuffed with ].   You really need grid paper to do those as you have lots of adding up in columns.. so anyway we spent ages getting quad ruled grid paper in Bangkok, as this is less common, or at least not easily found in the otherwise excellent stationary shops in the main shopping malls.

Some of these problems take a fair bit of working, so its easy to make typo mistakes .. it seemed to me if you could type in a grid that would really help.  When I thought about how much time Id spent hunting down stationary and that Id spent about $50 in the last year on grid paper… something kind of clicked and I decided to make a prototype and see if it would help.  thus was born GridMaths.

Heres a worked example, of a  ‘long multiplication with decimals’  problem done on a GridMaths sheet :


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.