With bg=transparent the embedded preview draws only the scene;
the host page shows wherever nothing is drawn. Fullscreen (double-click / double-tap)
always paints the viewer's own background.
The rotating circle is this page's own element. The square iframe sits on
top of it: the figure only, its center of mass held mid-frame, the clip's highlight at
half speed. shape=circle cuts whatever juts out of the circle. A tap pauses,
a double-tap opens the normal viewer, never clipped.
The button at the top-left corner belongs to this page and lies under the iframe: it counts clicks only on its part outside the square, because the viewer's corner still catches every tap.
Viewer URL:
The viewer in the bottom-right corner is fixed; scroll this page and its stripes pass behind the figure. A scroll that starts on the viewer must still scroll the page.
Viewer URL:
The same badge without shape=: this page puts
clip-path: circle(closest-side) on the iframe itself and resets it in both
fullscreen paths. A tap outside the circle reaches this page, not the viewer.
The same corner button counts clicks on its part under the iframe's corner too, because a host-clipped iframe lets taps outside the circle through.
Viewer URL: