Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Looks like a big SVG made with Inkscape:

    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
And the controls seem to be made with https://github.com/timmywil/panzoom:

    <script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
    <script type="text/javascript">
        const panzoom = Panzoom(elem, {
            maxScale: 12
        })

        m = {
            animate: true,
            relative: true,
            maxScale: 80
        }
        right.addEventListener('click', function() {
            panzoom.pan(100, 0, m);
        })
        left.addEventListener('click', function() {
            panzoom.pan(-100, 0, m);
        })
        lu.addEventListener('click', function() {
            panzoom.pan(-100, -100, m);
        })
        up.addEventListener('click', function() {
            panzoom.pan(0, -100, m);
        })
        ru.addEventListener('click', function() {
            panzoom.pan(100, -100, m);
        })
        down.addEventListener('click', function() {
            panzoom.pan(0, 100, m);
        })
        ld.addEventListener('click', function() {
            panzoom.pan(-100, 100, m);
        })
        rd.addEventListener('click', function() {
            panzoom.pan(100, 100, m);
        })
        center.addEventListener('click', panzoom.reset)
        zoom_in.addEventListener('click', panzoom.zoomIn)
        zoom_out.addEventListener('click', panzoom.zoomOut)
        elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)
    </script>


Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: