Old school D3 from simpler times

All examples By author By category About

norrs

Full window Github gist

readsdfsasdasd

<!DOCTYPE html>

<html>
<body>
   <style type="text/css" rel="stylesheet">

#save_view_spinner {
            margin-left: 10px;
            margin-bottom:2px;
            display: inline-block;
        }

.netmap-node-status {
            float: left;
        }
        .netmap-node-menu {
            margin: 0 0 10px 0;
            list-style-type: none;
        }
        .netmap-node-menu li {
            margin: 0;
            display: inline;
        }
        .netmap-node-category {

}

circle {
            stroke-width: 1.5px;
        }

line.speed0-100 {
            stroke-width: 1px;
        }
        line.speed100-512 {
            stroke-width: 1.5px;
        }
        line.speed512-2048 {
            stroke-width: 3px;
        }
        line.speed2048-4096 {
            stroke-width: 4.5px;
        }
        line.speed4096 {
            stroke-width: 6px;
        }
        line.warning_inspect {
            stroke: red
        }

path.link {
            fill: none;
            stroke: #666;
            stroke-width: 2px;
        }

marker#licensing {
            fill: lightgreen;
        }

path.link.licensing {
            stroke: lightgreen;
        }

path.link.resolved {
            stroke-dasharray: 0, 2 1;
        }

circle {
            fill: #ccc;
            stroke: #333;
            stroke-width: 3px;
        }

circle.node {
            stroke-opacity: 1;
        }

.node.fade {
            stroke-opacity: 0.1;
        }

text {
            font: 14px sans-serif;
            pointer-events: none;
            background: #c0c0c0;
        }

text.node {
            font: 12pt sans-serif;
        }

text.shadow {
            stroke: #fff;
            stroke-width: 4px;
        }

#tooltip.pretty {
            font-family: Arial;
            border: none;
            width: 210px;
            padding:20px;
            height: 135px;
            opacity: 0.8;
            background: url('/images/shadow.png');
        }
        #tooltip.pretty h3 {
            margin-bottom: 0.75em;
            font-size: 12pt;
            width: 220px;
            text-align: center;
        }
        #tooltip.pretty div { width: 220px; text-align: left; }

#tooltip.fancy {
            background: url('/images/shadow2.png');
            padding-top: 5em;
            height: 100px;
        }

div#pop-up {
            display: none;
            position:absolute;
            color: white;
            font-size: 14px;
            background: rgba(0,0,0,0.5);
            padding: 5px 10px 5px 10px;
            -moz-border-radius: 8px 8px;
            border-radius: 8px 8px;
        }
        div#pop-up-title {
            font-size: 15px;
            width:200px;
            margin-bottom: 4px;
            font-weight: bolder;
        }
        div#pop-up-content {
            font-size: 12px;
        }
        div#pop-desc {
            width: 100px;
        }
        div#pop-img {
            font-size: 30px;
            font-weight: bolder;
        }
    </style>

<svg id="svg-netmap" width="1490" height="700" pointer-events="all">
        <g transform="translate(328,114) scale(1)">
            <g class="link">
                <linearGradient id="linkload0" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload0)"
x1="447.3909159601148"
                y1="215.7135551163189" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload1" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload1)"
x1="664.9594167440488"
                y1="93.861190692826" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload2" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload2)"
x1="980.9522534446035"
                y1="242.8184283695718" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload3" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed0-100" stroke="url(#linkload3)"
x1="1019.5670029671962"
                y1="448.23945259154226" x2="1292.3470651737753"
y2="379.9428651785443"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload4" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload4)"
x1="1019.5670029671962"
                y1="448.23945259154226" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload5" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload5)"
x1="953.5837575432408"
                y1="552.6348385816988" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload6" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload6)"
x1="511.76685663396177"
                y1="587.9604044551955" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload7" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload7)"
x1="845.7322160638394"
                y1="115.14482581722756" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload8" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload8)"
x1="616.1102407793544"
                y1="653.8431882968368" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload9" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload9)"
x1="742.2599312516421"
                y1="672.1123555291831" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload10" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed0-100" stroke="url(#linkload10)"
x1="569.0296259602715"
                y1="120.16905763393952" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload11" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speedunknown warning_inspect"
stroke="url(#linkload11)" x1="998.3801283717048"
                y1="343.64404289432736" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload12" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed0-100" stroke="url(#linkload12)"
x1="861.8016008877133"
                y1="634.3403670561065" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload13" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload13)"
x1="756.9634771250729"
                y1="82.6418976201124" x2="718.1007098692874"
y2="385.9957038356713"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload14" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload14)"
x1="718.1007098692874"
                y1="385.9957038356713" x2="412.049021514296"
y2="363.19214885920167"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload15" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload15)"
x1="718.1007098692874"
                y1="385.9957038356713" x2="924.6009789926395"
y2="163.87568407516355"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload16" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed2048-4096" stroke="url(#linkload16)"
x1="718.1007098692874"
                y1="385.9957038356713" x2="444.6372281212683"
y2="489.88392835348446"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload17" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(N/A);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed0-100" stroke="url(#linkload17)"
x1="163.53176169411526"
                y1="239.55686350601366" x2="412.049021514296"
y2="363.19214885920167"></line>
            </g>
            <g class="link">
                <linearGradient id="linkload18" x1="0%" y1="0%" x2="0%"
y2="100%">
                    <stop offset="0%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="50%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="51%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                    <stop offset="100%"
style="stop-color:rgb(22,255,0);stop-opacity:1"></stop>
                </linearGradient>
                <line class="speed512-2048" stroke="url(#linkload18)"
x1="444.6372281212683"
                y1="489.88392835348446" x2="516.6214670391657"
y2="245.60260037847354"></line>
            </g>
            <g class="node"
transform="translate(447.3909159601148,215.7135551163189)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw1</text>
            </g>
            <g class="node"
transform="translate(664.9594167440488,93.861190692826)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw2</text>
            </g>
            <g class="node"
transform="translate(980.9522534446035,242.8184283695718)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw3</text>
            </g>
            <g class="node"
transform="translate(1019.5670029671962,448.23945259154226)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw4</text>
            </g>
            <g class="node"
transform="translate(953.5837575432408,552.6348385816988)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw5</text>
            </g>
            <g class="node"
transform="translate(511.76685663396177,587.9604044551955)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw6</text>
            </g>
            <g class="node"
transform="translate(845.7322160638394,115.14482581722756)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw7</text>
            </g>
            <g class="node"
transform="translate(616.1102407793544,653.8431882968368)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw8</text>
            </g>
            <g class="node"
transform="translate(742.2599312516421,672.1123555291831)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw9</text>
            </g>
            <g class="node"
transform="translate(569.0296259602715,120.16905763393952)">
                <image class="circle node" href="/images/netmap/gw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">fattimainn-gw</text>
            </g>
            <g class="node"
transform="translate(1178.6337039028326,861.8104818735617)">
                <image class="circle node" href="/images/netmap/srv.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">ica</text>
            </g>
            <g class="node"
transform="translate(568.7830042387557,1000.8002956187138)">
                <image class="circle node" href="/images/netmap/srv.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">kabelvase</text>
            </g>
            <g class="node"
transform="translate(998.3801283717048,343.64404289432736)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">lab-sw3</text>
            </g>
            <g class="node"
transform="translate(861.8016008877133,634.3403670561065)">
                <image class="circle node" href="/images/netmap/gw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">rikmainn-gw</text>
            </g>
            <g class="node"
transform="translate(756.9634771250729,82.6418976201124)">
                <image class="circle node" href="/images/netmap/gw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-gw2</text>
            </g>
            <g class="node"
transform="translate(718.1007098692874,385.9957038356713)">
                <image class="circle node" href="/images/netmap/gw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">uninett-gw</text>
            </g>
            <g class="node"
transform="translate(163.53176169411526,239.55686350601366)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-6etg-sw1</text>
            </g>
            <g class="node"
transform="translate(412.049021514296,363.19214885920167)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw11</text>
            </g>
            <g class="node"
transform="translate(924.6009789926395,163.87568407516355)">
                <image class="circle node" href="/images/netmap/sw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">teknobyen-5etg-sw10</text>
            </g>
            <g class="node"
transform="translate(1292.3470651737753,379.9428651785443)">
                <image class="circle node" href="/images/netmap/srv.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">stud-1201</text>
            </g>
            <g class="node"
transform="translate(444.6372281212683,489.88392835348446)">
                <image class="circle node" href="/images/netmap/gsw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">uninett-gsw2</text>
            </g>
            <g class="node"
transform="translate(516.6214670391657,245.60260037847354)">
                <image class="circle node" href="/images/netmap/gsw.png"
x="-16px" y="-16px"
                width="32px" height="32px"></image>
                <text dy="1.5em" class="node" text-anchor="middle"
fill="#000000"
                background="#c0c0c0">trd-gw7</text>
            </g>
        </g>
</svg>

</body>
</html>