Skip to content

Instantly share code, notes, and snippets.

@aubergene

aubergene/README.md

Last active February 10, 2016 16:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aubergene/e8d3ddd6399df051dbae to your computer and use it in GitHub Desktop.
Save aubergene/e8d3ddd6399df051dbae to your computer and use it in GitHub Desktop.
Download ZIP
Vector networks
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
#size {
position: absolute;
top: 10px;
right: 10px;
}
use {
stroke-width: 30;
}
</style>
</head>
<body>
<input id="size" type="range" min="1" max="40" step="1">
<svg width=900 height=500>
<defs>
<path id="a1" d="M50 50L200 50L200 200M200 50L50 200" stroke="#000" fill="none" />
<path id="a2" d="M50 50L200 50M200 200L200 50M200 50L50 200" stroke="#000" fill="none" />
<g id="a3">
<path d="M50 50L200 50M200 200L200 50" stroke="#000" fill="none" stroke-linecap="butt" />
<path d="M200 50L50 200" stroke="#000" fill="none" stroke-linecap="square" />
</g>
</defs>
<use transform="translate(0, 0)" xlink:href="#a1" stroke-linecap="butt" />
<use transform="translate(250, 0)" xlink:href="#a1" stroke-linecap="round" />
<use transform="translate(500, 0)" xlink:href="#a1" stroke-linecap="square" />
<use transform="translate(0, 250)" xlink:href="#a2" stroke-linecap="butt" />
<use transform="translate(250, 250)" xlink:href="#a2" stroke-linecap="round" />
<use transform="translate(500, 250)" xlink:href="#a3" />
</svg>
<script type="text/javascript">
var slider = document.getElementById('size')
var lines = document.querySelectorAll('use')
slider.oninput = function() {
for (var i = lines.length - 1; i >= 0; i--) {
lines[i].style.strokeWidth = this.value
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment