Interactive Zoom SVG Comic Viewer

This is an Interactive Zoom SVG Comic Viewer. It dynamically scales and spotlights individual comic panels within a massive, high-resolution raster image. Its function is to translate the physical experience of reading a comic book into a guided, cinematic digital flow, focusing user attention without losing the context of the page.

Specs

• Weight: ~120 KB (Dependencies: GSAP TweenMax, RxJS).
• Performance: Heavy on the compositor. Hardware-accelerated SVG viewBox animation and clip-path masks keep it running smoothly, but the base image (up to 4000x6059) requires significant VRAM allocation.
• Theming: Minimal. Interface colors are isolated to a single CSS variable (--main-bg-color).
• Responsiveness: Calculates viewport aspect ratio on load and resize to scale the base SVG dynamically, requesting low, standard, or high-res images based on screen width.
• Web APIs: Touch Events (swipe detection), SVG Bounding Box API.
• Graceful Degradation: If JavaScript fails, the viewer falls back to a static, fully visible high-resolution image without zooming capabilities. [!] Not accessible. Polygons lack tabindex and aria-label attributes for screen readers.

Anatomy

The structure is entirely SVG-based, mapping vector coordinates over a raster background.

• HTML: A layered SVG construct. An <image> tag forms the base layer, while invisible <path> polygons define clickable hit areas. Separate <clipPath> definitions hold the exact geometric boundaries for the spotlight effect.
• CSS (SCSS): Handles static layering, cursor states (zoom-in, zoom-out), and the application of the CSS clip-path to the darkening backdrop.
• JS: The director. RxJS throttles rapid user inputs to prevent animation glitches. GSAP handles the mathematics of tweening the SVG viewBox from the macro page view to the micro panel view.

Logic

The snippet calculates precise camera movement by animating the SVG viewBox attribute rather than the element’s CSS transforms.

function zoom() {
  zoomed = true;
  TweenMax.to(zoomable, .6, {
    attr: { viewBox: zoomView },
    ease: zoomEase,
    onComplete: this.unpause
  });
}

Instead of moving the image, it changes the camera lens. The getViewbox function reads the target polygon’s exact dimensions (target.getBBox()), compares them against the browser window’s aspect ratio, and mathematically derives a new coordinate string. The result is flawless, responsive panning that perfectly frames the content without pixel distortion.

Feel

Cinematic and deliberate. Swiping or pressing arrow keys snaps the camera between frames with a smooth, linear glide. The spotlight effect darkens surrounding visual noise, creating a highly focused reading rhythm. It feels less like navigating a webpage and more like a camera panning across a physical canvas.