playground
A draggable blue rounded square with two lines of white text, "Hello," and "World!", is overlaid on a larger SVG canvas. The example demonstrates creating custom SVG elements with D3.js v7 and applying basic interactivity. It uses `d3.drag()` to handle pointer events and update the square's `x` and `y` attributes during a drag. The SVG is built programmatically using DOM manipulation in `index.js`, and styles are defined in a separate CSS file.