Orbiticon

Animated sci-fi style circular identicon inspired by identicon by ea7ababe.

Playground

Seed data-seed

Rings Draw from radius data-from-radius Amount of sectors data-sectors Margin between orbits data-margin-between-orbits

Stroke Default width data-stroke-width Minimum opacity data-min-opacity

Range of random stroke width From data-min-random-stroke-width To data-max-random-stroke-width

Animation Animated data-animated Shortest rotation time data-min-rotation-time Longest rotation time data-max-rotation-time

Display Colors (random if unset) data-colors RGB hex finder

Never Asked Questions

What is "Draw from radius"?

"Draw from radius" defines the distance from the center of the circle where the rings begin to be drawn. This option helps create space for placing a circular image at the center, enhancing its uniqueness.

Note that the script inside the SVG file modifies the viewBox (not the width and height) when (re)generating the pattern. Because of this, increasing this value moves the rings outward, gradually making them appear thinner due to scaling effects.

What are sectors?

Sectors are equal segments within each ring. For example, if a ring is divided into 8 sectors, it is split into 8 equal parts. The bits derived from the hash binary string determine which sectors will be filled.

How to disable random stroke width?

Set both inputs in "Range of random stroke width" to the same value as the default width will do the trick.

What does opacity do here?

Opacity not only enhances visual appeal but also serves as an indicator of stroke width randomization. The greater the deviation from the default stroke width, the more transparent the stroke becomes.

The "Minimum opacity" option sets a lower limit for opacity—lower values make strokes with greater width variations less visible, while setting it to 0 can make highly fluctuating strokes difficult or impossible to see. Conversely, setting it to 1 ensures that every ring remains fully opaque.

How can you make it even cooler?

Try applying the CSS rule filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2)) to add a subtle glowing effect.