I spent the morning finishing this. The original I made years ago using proprietary Adobe SVG scripting techniques and after recently falling for Raphaël I thought I'd make it work in modern browsers but using similar techniques.
I did the original in order to help teach the kids about how a lock works - they'd been through enough of them and cycled over one at least once a day on the way to primary school - that I thought that a visual representation might be in order.
Please play with it and tell me if you see any problems... I've tried and not been able to find anything wrong!
If you like it then feel free to copy it, check the source for how the script works: it's something of a clumsy approach to animation I'm afraid - as I noted above - the technique was taken from an old approach to SVG animation. I'd welcome critique and alternatives. I'm sort of unhappy about the movement of the boat particularly as I keep manipulating the line string and I'm not sure that that's for the best - I know it doesn't work on IE10 you see...
I'd like to thank Sarah for the colours, I did have it using just primary colours and it was really quite garish!