Looping & Ambient · Runs on repeat
Liquid path morph液态路径形变
- always deforming
- elastic
- edges flowing
A few decorative shapes deform slowly and forever: edges bulge and hollow out like an elastic liquid, a few seconds per cycle. Position and size never change — it is the outline itself that moves.
When to use it
Use it for background decoration, brand shapes, dividers, and loading placeholders. Do not use it on shapes that carry meaning — icons and charts — because once the outline moves people can no longer read them.
Parameters
interpolate <path> d between two vertex sets · same vertex count required · 3–6s easeInOutSine · alternate, infinite
Recipe
Liquid path morph → 6swhen interpolate <path> d between two vertex setsLiquid path morph → same vertex count required · 3–6s easeInOutSine · alternate, infinite
One sentence for your AI
Make these decorative shapes deform forever: prepare two sets of <path> coordinates with the same vertex count, interpolate them vertex by vertex every frame and write the result back into the d attribute. One cycle every 3–6s, easeInOutSine, alternating infinitely. The vertex counts must match or it will jump. Do not move or resize the shapes.