This page showcases a few tiny code examples in JavaScript + HTML, written by Jos Vromans. The amount of bytes is the amount of characters that will be loaded in the web browser. This includes the html.

When clicking on one of the items, you will go to a page that only serves a very minimal html file, yet it renders an artwork. You can inspect this with your browser tools (check the network tab). For the 'Generative Fern' example, the network tab will show that only 230 bytes of data was loaded.

This only works when you hover your cursor on top of the element(s) on the page. One character is already drawn on the page, moving your mouse will generate the randomness needed to fill the page. Nothing will happen when the mouse is above the empty part of the page. This trick to display character with just 64 characters of code comes from Mathieu 'p01' Henri, who made THREAD JS, a tiny 10 print generator.

When moving the mouse over the first characters, a network appears from these characters, which are 'box-drawing characters'.

Using the characters with 'charcode' 9698-970, to tile the page with randomly orientated triangles. When changing the zoom level or dimensions of the browser window the artwork might become more interesting, as you can make the tiles appear larger on your screen.

A different vinyl collection on every page load.

A different fern on every page load. This is a variation on an IFS (iterated Function System), the code that generates Barnsley's Fern. This code will use the default canvas dimensions, which results in a small drawing. You can enlarge it by increasing the browser zoom level.

A canvas full of circles, different every time you refresh the page.

Just a shiny disk on every page load, in different colors.

Pegs in Primary colors, different on every page load.

A colorfol artwork on every page load.

A Sierpinsky triangle, drawn using the Chaos Game, without calling Math.random()! Instead it utilizes the sine method, a trick I learned from Frank Force (@KilledByAPixel). It can be seen (towards the edges) that the random distribution is not as it is supposed to be.

An animated version of the 10 print algorithm. Slowly, the entire screen will be filled with slashes and backward slashes.

A generative color study, different on every page load. This artwork will take the full screen dimensions.

A different symmetrical triangle subdivision on every page load.

This generative artwork is inspired by Hiroshi Kawano's Design 3-1, and it will adapt to any screen size. A different artwork will be generated every time you click on the screen.

On every page load, a different 10 print pattern. When double clicking on the canvas, an SVG file will be downloaded which can be used to plot this with a pen plotter.

This is experimental code that does not follow the best HTML and JavaScript standards. Instead, as much code as possible has been stripped away, as long as the code still executes in most web browsers. These examples can still be improved, there are always tricks to get rid of a few more characters. You can always send improvements to my email address or message me on X.


SitemapSocialsContact
Home Subscribe InstagramE-mail
Work Resources YouTube LinkedIn
Writing Tinycode 𝕏
About NFTs Warpcast