Getting a computer to draw a shape in the way that a human would requires programming in some imperfection. The simple idea is to add in some randomization of drawing coordinates, which could be done in various ways. Below are two examples of imperfect circles drawn in an HTML5 canvas with JavaScript, where the imperfection has been added through the use of a fractal-like subdivision algorithm. The imperfection can be subtle, but it is enough to make the image appear to be human-drawn. Although the images are quite simple I find them quite nice to look at.

Click on the two screenshots to see the drawings generated in real time (subsequent clicks on the canvas will cause the image to be regenerated). Then read below for another demonstration and more information on the fractal subdivision process used to create the human touch.

[Update 2021: I’m afraid I had to remove my code as it seems people may be profiting from NFTs built with my ideas and code, without attribution.

I’m afraid I have also felt the need to remove the precise ideas behind the code.]


html5 imperfect fractal circles 1

html5 imperfect fractal circles 2