Identipattern

Create beautiful geometric background images from a hash, checksum, ID, or other string. Beautiful seamless-tile SVG, PNG, or JPG patterns. Identified by, and unique to your string.

Your string is converted into a SHA and a color and pattern are determined based on values in the hash. The color is determined by shifting the hue and saturation from a default base color. One of 16 geometric patterns are selected based on the hash, and the sizing of elements in the pattern is also determined by the hash — resulting in many possible combinations.


Identipattern API

HTTP Endpoint

https://io.src.works/idp/v1

Required Path Components

https://io.src.works/idp/v1/{string}.{svg|png|jpg}
  • {string} A string that will be hashed and uniquely identify your pattern. The pattern itself is generated, as described above, based on the value of this string. It’s a good idea to use a numeric database ID or the like.

  • {svg|png|jpg} One of these file extensions.

Optional Path Components

  • /s/[size] Generates a square of this size, in pixels. Note: If you pass in a size, there’s no reason to pass it a width or height also. 2048 max.

  • /w/[width] A width in pixels. 2048 max.

  • /w/[height] A height in pixels. 2048 max.


Perfect Seamless Tile

When you don’t pass in a specific size, width, or height, the pattern will be generated as a perfect seamless tile that you can repeat via CSS.

The pattern itself, and the size of the seamless tile, will vary, based on a hash of example-string. Remember, actual dimensions of each seamless tile may vary.

https://io.src.works/idp/v1/example-string.svg


Background Pattern (Specific Dimensions)

When you pass in a size, width, or height, a background image is produced from the pattern; i.e., it’s no longer a seamless tile. This is perfect for automatic thumbnail generation. You might pass in the ID of a post as the string.

https://io.src.works/idp/v1/example-string/w/700/h/256.svg


Additional Examples

https://io.src.works/idp/v1/c3345sa2342/s/700.svg


https://io.src.works/idp/v1/49093245adfe/w/700/h/200.png


https://io.src.works/idp/v1/x0o90s/w/700/h/200.jpg


https://io.src.works/idp/v1/12xa3345sa/w/700/h/200.svg


https://io.src.works/idp/v1/a4234j87sdxxa/w/700/h/200.svg


And many other possibilities. Enjoy!

Share This
Posted in: