4 notebooks about drawing and animating 'waterlines'—an old technique for showing water in maps—in JavaScript.

Olivia Vane

I: Drawing water (in old maps)

II: Drawing waterlines on maps

III: Animating waterlines - SVG morphing

IV: Animating waterlines - Canvas strokes

IV: Animating waterlines - Canvas strokes [no web worker]

Waterlines collection

Screenshot 2020-05-23 at 14.51.48.png

Screenshot 2020-05-23 at 14.51.33.png

Hockney-water.png

Screenshot 2020-12-31 at 14.54.14.png

Screenshot 2020-12-31 at 14.53.59@1.png

1@2.jpg

7@1.jpg

6@1.jpg

12@1.jpg

17@1.jpg

24@1.jpg

5@1.png

18@2.jpg

25@1.png

4@2.jpg

23@1.png

30@1.png

33@1.png

26@1.png

28@1.png

14@1.png

21@1.png

16@1.png

31@2.png

19@1.png

29@1.png

15@1.png

2@2.png

10@1.png

3@2.png

9@1.png

20@1.png

32@1.png

8@1.png

22@1.png

13@1.png

11@1.png

27@1.png

Screenshot 2021-01-25 at 16.51.02.png

d2@1.png

d9@1.jpg

d10@1.jpg

d3@1.png

d6@1.png

d1@1.png

d11@1.png

d7@1.png

d5@1.png

d8@1.png

d13.png

d12@1.png

d4@1.png

h8@2.png

h3@1.png

h4@1.png

h6@1.png

h5@1.png

h7@1.png

h1@1.png

h2@1.png

15b.jpg

7b.jpg

2b@1.jpg

22b.jpg

33b.jpg

11b.jpg

24b.jpg

6b.png

4b.jpg

12b.png

8b.png

13b.png

14b.png

23b.png

1b@1.png

31b.png

10b.png

3b@2.png

9b.png

25b.png

26b.png

18b.png

32b.png

5b.png

20b.png

30b.png

27b.png

21b.png

19b.png

17b.png

28b@1.png

29b@3.png

16b@1.png

d1b.jpg

d3b.jpg

d6b.jpg

d8b.png

d4b.png

d7b.png

d11b.png

Purpose-built for displays of data