Tiny web component that shows a unique'ish SVG based document icon depending on a name. Think identicon/gravatar for doc icons.
I needed/wanted an easy way of displaying different icons for different documents for a project. Got carried away a bit and had a bit of fun with procedural generation.
The seeded random number generation is based on the Mulberry32 PRNG which I think I ported from here. And the string hashing is ported from here if I remember correctly.
Other than this the implementation is be pretty straight forward and goes something like this:
- create a vanilla web component
- hook up attributeChangedCallback
- read the name attribute
- hash the name
- seed the PRNG with the hash
- create an SVG with a path that looks like an empty document
- draw some random lines and boxes based on the seeded PRNG into the SVG
- throw the SVG into the shadow dom
- and done
The full implementation and usage examples are in the index.html file. If you find it cool and would like to use it you can do so free of charge in any kind of project including commercial ones. Please respect the chosen license and include a reference of it and the original work.
More than welcome and appreciated. Just open a PR! You can also open an issue with ideas/suggestions/questions etc.