Vector editor

On a pale grey card, a blob, a star and a rounded square sit inside the frame a design tool draws around a selected layer: a one-pixel bright blue box 40px outside the shape, four small white square handles at its corners, and a blue badge under it reading the box's width by height. Each time the card comes into view the box scales open from its top-left corner over 0.6 seconds, the handles pop in one after another 0.1 seconds apart, and the badge pops in under the box.

Inside, the shape shows its rig. Every anchor of the path is a dot, every bezier handle a diamond joined to its anchor by a thin arm. Dragging an anchor moves it with its handles; dragging a handle reshapes the curve, and the anchor's other handle follows by the mirror rule: mirrored in angle and length, in angle only, or free. Holding Alt breaks the tangent into a corner for that drag. The editor maps the pointer into the SVG's own user units through the live screen matrix, so it stays exact at any size, and hands back the new path after each move.

The path is parsed once from a normal SVG d string, absolute or relative M, L, H, V, C, S, Q, T and Z, into subpaths of anchors with in and out handles, and serialised back the same way. The frame takes its size from the content, or from explicit numbers, and its badge stays honest as the shape changes.

• Parse the d string into anchors, each a point with optional in and out handles, grouped into subpaths: a line leaves an anchor without handles, a quadratic is raised to the equivalent cubic.
• Draw the path, then over it the rig: an arm line and a diamond per handle and a dot per anchor, each with its own pointer handler.
• On drag, map clientX and clientY through the SVG's inverse screen matrix, move the anchor and its handles together, or the handle alone with its twin following the mirror rule.
• Wrap the content in the frame: an absolutely placed border plus four handles and a badge reading the measured size.
• Play the intro with three keyframe animations, the border scaling open from top-left and the handles and badge popping in with delays, and remount it to replay.
• Under reduced motion, skip the intro animations.

• SHAPE (a blob, a star and a rounded square): The SVG path being edited.
• VIEW_BOX (0 0 520 170): The path's coordinate box.
• SHAPE_W, PAD (300, 40): The drawn width of the shape and the gap to the frame.
• FRAME (blue #0d99ff, 8px white handles, badge on): The selection frame's colours, handle size, border width and badge.
• GROUND (#f7f7f7): The card colour.