Skip to content

Instantly share code, notes, and snippets.

@gojko

gojko/curves.html

Created June 22, 2017 07:53
Show Gist options
  • Save gojko/62917fa55345cf23c231e447e4392413 to your computer and use it in GitHub Desktop.
Save gojko/62917fa55345cf23c231e447e4392413 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
curves.html
<html>
<body>
<div id="v1">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="736" height="414" viewBox="0, 0, 736, 414">
<path d="M120.5,170.5 C120.5,170.5 220.5,91.5 268.5,203.5 C316.5,315.5 434.5,263.5 375.5,201.5 C316.5,139.5 498.5,151.5 633.5,289.5" fill-opacity="0" stroke="#000000" stroke-width="4"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="736" height="414" viewBox="0, 0, 736, 414">
<path d="M317.5,81.5 C317.5,81.5 437.403,153.5 485.403,265.5 C533.403,377.5 692.403,138.5 633.403,76.5 C574.403,14.5 412.5,-6.5 547.5,131.5" fill-opacity="0" stroke="#C32929" stroke-width="3"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="736" height="414" viewBox="0, 0, 736, 414">
<path d="M451.5,85.5 L105.5,329.5" fill-opacity="0" stroke="#1ACD31" stroke-width="4"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="736" height="414" viewBox="0, 0, 736, 414">
<path d="M120.5,263.5 C120.5,263.5 129.5,355.5 278.5,356.5 C427.5,357.5 483.5,222.5 483.5,222.5" fill-opacity="0" stroke="#1A22CD" stroke-width="4"/>
</svg>
</div>
<div id="v2" class="hidden">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="736" height="414" viewBox="0, 0, 736, 414">
<path
d="M120.5,170.5 C120.5,170.5 220.5,91.5 268.5,203.5 C316.5,315.5 434.5,263.5 375.5,201.5 C316.5,139.5 498.5,151.5 633.5,289.5" fill-opacity="0" stroke="#000000" stroke-width="4"/>
<path d="M317.5,81.5 C317.5,81.5 437.403,153.5 485.403,265.5 C533.403,377.5 692.403,138.5 633.403,76.5 C574.403,14.5 412.5,-6.5 547.5,131.5" fill-opacity="0" stroke="#C32929" stroke-width="3"/>
<path
d="M451.5,85.5 L105.5,329.5" fill-opacity="0" stroke="#1ACD31" stroke-width="4"/>
<path
d="M120.5,263.5 C120.5,263.5 129.5,355.5 278.5,356.5 C427.5,357.5 483.5,222.5 483.5,222.5" fill-opacity="0" stroke="#1A22CD" stroke-width="4"/>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</svg>
</div>
<style>
div {
width: 736px;
height: 414px;
}
#v1 svg {
position:absolute;
top: 0px;
left: 0px;
}
path:hover {
transition: 0.3s all;
stroke-dasharray: 8,8;
cursor: crosshair;
}
.hidden {
display: none;
}
.arrows {
marker-start: url(#Triangle);
marker-end: url(#Triangle);
}
</style>
<script>
const list = document.querySelectorAll('path');
for(const entry of list.entries()) {
entry[1].addEventListener('click', function (e) {
console.log('clicked on', e.target.getAttribute('stroke'));
e.stopPropagation();
e.stopImmediatePropagation();
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment