PortalInk: 2.5D Visual Storytelling with SVG Parallax and Waypoint Transitions

Efforts to expand the authoring of visual stories beyond the 2D canvas have commonly mapped flat imagery to 3D scenes or objects. This translation requires spatial reasoning, as artists must think in two spaces. We propose PortalInk 1, a tool for artists to craft and export 2.5D graphical stories while remaining in 2D space by using SVG transitions. This is achieved via a parallax effect that generates a sense of depth that can be further explored using pan and zoom interactions. Any canvas position can be saved and linked to in a closed drawn stroke, or “portal,” allowing the artist to create spatially discontinuous, or even infinitely looping visual trajectories. We provide three case studies and a gallery to demonstrate how artists can naturally incorporate these interactions to craft immersive comics, as well as re-purpose them to support use cases beyond drawing such as animation, slide-based presentations, web design, and digital journalism.

Authors

Institutions

Publication Details

Published
2024-10-11
DOI
https://doi.org/10.1145/3654777.3676376
Citations
2
Primary Topic
Data Visualization and Analytics
Type
article
Field-Weighted Citation Impact
0.50
Controls
|||
ALL TIME
JAN
FEB
MAR
APR
MAY
JUN
JUL
AUG
SEP
OCT
article

PortalInk: 2.5D Visual Storytelling with SVG Parallax and Waypoint Transitions

Jeff J. S. Huang, Tongyu Zhou, Ji Won Chung, Vivian Hsinyueh Chan et al.
2 citations
Data Visualization and Analytics
0.50
article

PortalInk: 2.5D Visual Storytelling with SVG Parallax and Waypoint Transitions

Jeff J. S. Huang, Tongyu Zhou, Ji Won Chung, Vivian Hsinyueh Chan, Joshua Kong Yang
article en
2 citations

Abstract

Efforts to expand the authoring of visual stories beyond the 2D canvas have commonly mapped flat imagery to 3D scenes or objects. This translation requires spatial reasoning, as artists must think in two spaces. We propose PortalInk 1, a tool for artists to craft and export 2.5D graphical stories while remaining in 2D space by using SVG transitions. This is achieved via a parallax effect that generates a sense of depth that can be further explored using pan and zoom interactions. Any canvas position can be saved and linked to in a closed drawn stroke, or “portal,” allowing the artist to create spatially discontinuous, or even infinitely looping visual trajectories. We provide three case studies and a gallery to demonstrate how artists can naturally incorporate these interactions to craft immersive comics, as well as re-purpose them to support use cases beyond drawing such as animation, slide-based presentations, web design, and digital journalism.

John Brown University (US), University of California, Berkeley (US)
Openalex Percentile: Top 34%
Data Visualization and Analytics
0.50
AI Navigator

Ask Laika to Summarize, Analyze, and Connect papers live on the map.

Summarize Papers & Methodologies

Extract key findings, datasets, and comparative methods across publications.

Benchmark Rankings & Visual Analytics

Rank top research institutions, authors, funders, topics, and journals by Field-Weighted Citation Impact (FWCI) and paper volume with instant charts.

Connect Distant Disciplines

Bridge topological clusters on the map to find hidden collaborative intersections.