Skip to content

Instantly share code, notes, and snippets.

@norrs

norrs/README

Created June 14, 2012 14:16
Show Gist options
  • Save norrs/2930614 to your computer and use it in GitHub Desktop.
Save norrs/2930614 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
demo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!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">
<rect width="1490" height="700" fill="rgba(255,0,0,0.5)" id="gggggg">
<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>
</rect>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment