Skip to content

Instantly share code, notes, and snippets.

@anderflash

anderflash/svgpie.html

Created December 8, 2016 23:21
Show Gist options
  • Save anderflash/3da1e175da3311cd6e5bc3af8ca8af13 to your computer and use it in GitHub Desktop.
Save anderflash/3da1e175da3311cd6e5bc3af8ca8af13 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svgpie.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<title></title>
</head>
<body>
<svg width=500 height=500 id="svg">
<circle id="bigcircle" r=100 cx="250" cy="250" fill="none" stroke-width="2px" stroke="blue"/>
<circle id="smallcircle" r=10 cx="370" cy="250" fill="blue"/>
<line id="line" x1="250" y1="250" x2="350" y2="250" stroke-width="2px" stroke="blue" stroke-dasharray="10 10"/>
<line id="linebase" x1="250" y1="250" x2="350" y2="250" stroke-width="2px" stroke="blue"/>
<text id="text" x="350" y="250" fill="blue" text-anchor="middle">0</text>
<path id="arc1" fill="rgba(0,0,255,0.5)" stroke="none" d="M350 250 A 100 100, 0, 0, 0, 350 250 L 250 250 Z"/>
</svg>
<script type="text/javascript">
var bc = document.getElementById("bigcircle");
var sc = document.getElementById("smallcircle");
var ln = document.getElementById("line");
var svg = document.getElementById("svg");
var arc1= document.getElementById("arc1");
var text= document.getElementById("text");
var rbc = 100;
var rsc = 140;
var rtext= 120;
var pressed = false;
sc.addEventListener("mousedown", (event)=>{
pressed = true;
});
svg.addEventListener("mouseup", (event)=>{
pressed = false;
});
svg.addEventListener("mousemove", (event)=>{
if(pressed){
var x = event.clientX - 250;
var y = event.clientY - 250;
var mag = Math.sqrt(x*x+y*y);
sc.cx.baseVal.value = x/mag * rsc + 250;
sc.cy.baseVal.value = y/mag * rsc + 250;
ln.x2.baseVal.value = x/mag * rbc + 250;
ln.y2.baseVal.value = y/mag * rbc + 250;
var angle = ((-Math.atan2(y,x)/Math.PI * 180 + 360) % 360);
text.innerHTML = angle.toFixed(0);
text.x.baseVal[0].value = x/mag * rtext + 250;
text.y.baseVal[0].value = y/mag * rtext + 250;
if(angle <= 180.0){
arc1.setAttribute("d","M350 250 A 100 100, 0, 0, 0, " + ln.x2.baseVal.value + " " + ln.y2.baseVal.value + " L 250 250 Z");
}else{
arc1.setAttribute("d","M" + ln.x2.baseVal.value + " " + ln.y2.baseVal.value + " A 100 100, 0, 1, 1, 350, 250 L 250 250 Z");
}
}
});
var tl = new TimelineMax();
tl.to(svg, 8, {opacity:1});
</script>
<style type="text/css">
body,html{
margin:0;
padding:0;
}
#text{
pointer-events: none;
cursor: normal;
user-select:none;
}
#svg{
opacity: 0;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment