SVG animations often rely on repeated timelines. When multiple elements share identical or harmonically related durations, they drift into synchronised loops. The result is visual repetition that becomes noticeable over time. However we built an SVG logo animation that will never repeat, well not in your lifetime at least.
An asymmetric timing matrix deliberately offsets animation delays and durations so that no two elements share simple rhythmic relationships. Instead of a uniform loop, you create a composite animation whose full phase alignment takes an extremely long time to repeat.
In practice, this shows
- No visible synchronised “reset” moment
- No obvious rhythmic repetition
- A perception of organic motion
- Long-running animations that do not feel mechanical
This technique is great for:
- Ambient hero animations
- Data visualisations
- Generative branding elements
- Decorative polygon or particle systems
The core principle is mathematical rather than aesthetic. By choosing durations that are not harmonically aligned, you dramatically increase the time required for the entire system to return to the same state.
In our specific configuration, the full composite animation would only return to its exact original phase alignment after approximately 1,415 years. In practical terms, that means it will never visibly repeat during human observation.
How we used this…
You can stare at our logo as long as you want… we promise the pattern doesn’t repeat 😊
Nerd Alert. Highly Technical Overview
Under the hood, this SVG is not random. It is a tightly controlled, deterministic animation system built from a single shared keyframe definition.
Every polygon in the graphic uses the same animation, swarm-pulse-inverted. That animation handles three things simultaneously: a slight scale shift, a temporary colour change from white to pink, and a short-lived glow using a drop-shadow filter. On its own, that keyframe sequence is simple and fully repeatable.
The non-repeating feel comes from the timing layer.
Each polygon is assigned a unique animation-duration and animation-delay using polygon:nth-of-type(n). The delay acts purely as a phase offset, it determines where in the cycle a shape appears when the page loads. The duration determines how quickly that shape moves through the pulse cycle on every subsequent loop.
Because the durations vary between 3.6 and 4.5 seconds, and because they are deliberately chosen to avoid simple harmonic relationships, the entire 19-polygon system only returns to its exact original phase alignment after approximately 1,415 years.
That is not poetic exaggeration. It is the calculated composite repeat interval created by combining those specific timing values.
What this means in practice:
- Individual polygons loop normally.
- Small clusters occasionally appear to synchronise.
- The entire grid never visibly resets as a whole.
- The animation feels generative despite being fully deterministic.
From an implementation perspective, several details reinforce this behaviour:
- transform-box: fill-box and transform-origin: center ensure that scaling occurs relative to each polygon’s own geometry, not the SVG canvas.
- The animation runs infinitely but remains lightweight because it is CSS-driven and does not rely on JavaScript.
- The pulse peak at 10 percent of the timeline creates a quick highlight moment, while the longer return to baseline prevents rhythmic uniformity across the grid.
- The asymmetric timing matrix is applied structurally using nth-of-type, which means the behaviour is encoded directly into the document order of the SVG.
The result is a motion system that is mathematically periodic, but on a timescale far beyond human perception. It produces organic drift, avoids synchronised looping, and achieves long-form variation without introducing randomness or runtime complexity.
This is structured asymmetry applied deliberately, turning a simple looping keyframe into a multi-century composite cycle.