Signature
An animated SVG signature effect that draws out text as if hand-written.
Live preview recorded from Bakai Lab; experiment and demo by Bakai Tolondu uulu. Preview: platform recorded · rights authorized.
An operational grid experiment with layered cells, responsive pointer states, and smooth spatial transitions.
LSource LandLab - Bakai Tolondu uuluWhy it stands out
An operational grid experiment with layered cells, responsive pointer states, and smooth spatial transitions.
Build a looping op-art grid in a canvas. This one is "Round": Placeholder text again, long enough to wrap onto a third line and show the leading. Every tile is a square WINDOW with a single straight edge across it. That is the whole vocabulary — triangle, trapezoid, sliver and solid block are all just the square clipped by a half-plane, so the only two things that ever change are the ANGLE of that edge and its signed DISTANCE from the tile's centre. Clip with Sutherland-Hodgman against the one line, and use CIRCULAR windows, where the visible shape is the arc within acos(d/h) of the normal closed by its chord. THE REST STATE At rest every edge points straight back at the centre of the grid: the edge lies ALONG the radius, so the normal you feed rotate() is the radius turned a quarter (atan2(dy,dx) + PI/2). That reads as a starburst. THE MOTION Every tile takes the SAME short turn, but the window when it happens sweeps across the grid, scheduled so the last tile finishes exactly on the wrap. It reads as a front travelling through, not as the whole surface winding up. The delay is linear in radius: the centre leads, the corners trail. THE OFFSET The edge also slides along its own normal, one cycle per loop, with the phase gained by radius. Without it the still frame is a plain sunburst; with it the tiles break into rings of heavier and lighter black. Amplitude is damped toward the centre so the middle stays legible, and no tile should ever saturate to solid. SEAMLESSNESS IS THE CONSTRAINT. Every law has to return to its start at tau=1 or the loop visibly clunks: turns are whole numbers (a half turn maps a half-plane onto its own complement and wraps with a black/white flash), ripple counts are whole numbers, and a spring has to be normalised to land exactly on 1 because a spring only asymptotes. Settings for this variant, against a 10x10 / 0.19-gutter baseline: shape: "circle", motion: "cascade", dur: 0.22, Watch out for: - Put the origin ON a tile, not on a gutter, or an even tile count gives a 4-way seam. - Batch every tile into ONE path and fill once. They are all the same colour. - Ease in-out, because the tiles are MOVING on screen rather than entering or leaving.
Discovery vocabulary
Related by governed terms
An animated SVG signature effect that draws out text as if hand-written.
More from Lab - Bakai Tolondu uulu