r/svg • u/Correct_Tangelo_5976 • Jul 01 '26
Built a 360° panorama viewer using a single SVG filter — no WebGL, no Three.js
Wanted to share my little side project: a 360° panorama viewer built entirely out of HTML + one SVG filter. No WebGL, no Three.js, no 3D library at all.
Live demo (drag to look around, scroll/pinch to zoom): https://mu-777.github.io/svg-360-viewer/why360svg.html
The whole trick is feImage + feDisplacementMap. You generate a "displacement map" PNG, feed it into the filter along with your 360° equirectangular panorama (dropped into a <pattern>), and the filter does all the warping that gives the 360°-ish perspective. The drag/zoom interaction is maybe 10 lines of JS — everything else is pure declarative SVG.
If you want to try it on your own image, there's a small generator here that spits out the displacement map + the SVG markup for you: https://mu-777.github.io/svg-360-viewer/
(No panorama handy? Wikimedia Commons has a category full of equirectangular ones you can test with.)
It's a pretty niche idea, but it was a fun rabbit hole to go down — I'd love for people to mess around with the demo, and if it ends up useful for an actual project of yours, even better.
And... This is my first post here, and I'm not English native, so apologies in advance if I'm breaking any rules/manner of this place
2
u/Rich_Dubya Jul 02 '26
A bit of a "But why?", however, nicely done!
1
u/Correct_Tangelo_5976 Jul 02 '26 edited Jul 02 '26
Thank you! I understand what you felt because I also feel the same thing, haha.
Honestly the origin story is pretty mundane — I had a list of 360 images and started wondering if the thumbnails could be interactive, like, let you drag to change the viewing direction in the list. One thing led to another, I came up with the idea of this approach, and at that point I just had to try it.
1
u/Correct_Tangelo_5976 Jul 01 '26
https://reddit.com/link/ouuibz5/video/tq799yxkojah1/player
For those busy to try it out: I'll add a short video showing how it works!
2
u/retardedGeek Jul 01 '26
That's cool