Repeating patterns with SVG in a lit component

I found this example on Lit page wit some things on repeating patterns using characters, forming a shape with them and repeating this shape through the page with the use of SVG tags. Go ahead on the bottom of the page and test some values on the fields, results can be quite astonishing.

The original source code example was acquired from Lit templates.

The SVG API allows for some very interesting shapes manipulation, following this and a Lit example on pattern repetition, i got a pique of interest in making something interesting related to repeating patterns; in order to make pages less monochromatic and more interesting i intend on making shapes to "rain down" or move around the window, preferably in a non distractive way, for now i have this to test some combinations. I remember there was another site on Neocities that used a similar technique for generating this patterns (also using characters) but i forgot what site it was :(

SVG brings two excelent properties to making repeating patterns: the API abstracts and quite likely is lighter on generating/animating things, and there is no way to use character selection (CTRL + F) to select the characters inside the pattern, so if a user is searching on your page, there will be no crazy selection of a tremondous amount of possible results.

Go ahead and visit Lit examples page for some very interesting dynamic examples!