Skip to content

Instantly share code, notes, and snippets.

@enthal

enthal/index.html

Last active November 14, 2020 02:55
Show Gist options
  • Save enthal/3a7e4923c274cb678f60 to your computer and use it in GitHub Desktop.
Save enthal/3a7e4923c274cb678f60 to your computer and use it in GitHub Desktop.
Download ZIP
D3/SVG "finger" articulation: https://bl.ocks.org/enthal/3a7e4923c274cb678f60
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
fill: none;
stroke: #300;
stroke-width: 4px;
stroke-linecap: round;
}
svg rect.mouse {
fill: none;
stroke: none;
pointer-events: all;
}
svg .arm line { stroke-opacity: 0.8; stroke-width: 42px; }
svg .hand line { stroke-opacity: 0.6; stroke-width: 28px; }
svg .finger1 line { stroke-opacity: 0.4; stroke-width: 18px; }
svg .finger2 line { stroke-opacity: 0.3; stroke-width: 14px; }
</style>
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>
var width = 960, height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var arm = svg.append("g").classed("arm", true)
.attr("transform", "translate(100,200) scale(1.2)")
.append("g");
arm.append("line")
.attr("x2", 250);
var wrist = arm.append("g")
.attr("transform", "translate(250)")
.append("g");
var hands = [];
var knuckle1s = [];
var knuckle2s = [];
function addHandPart(length) {
var hand = wrist.append("g").classed("hand", true);
hands.push(hand);
hand.append("line")
.attr("x2", length);
var knuckle1 = hand.append("g")
.attr("transform", "translate("+length+")")
.append("g")
knuckle1s.push(knuckle1);
var finger1 = knuckle1.append("g").classed("finger1", true);
finger1.append("line")
.attr("x2", 2*length/3);
var knuckle2 = knuckle1.append("g")
.attr("transform", "translate("+2*length/3+")")
.append("g")
knuckle2s.push(knuckle2);
var finger2 = knuckle2.append("g").classed("finger2", true);
finger2.append("line")
.attr("x2", length/3);
}
addHandPart(100);
addHandPart(120);
addHandPart(110);
svg.append("rect").classed("mouse", true)
.attr("width", width)
.attr("height", height)
.on("click", move);
move();
function move() {
arm
.attr("transform", "rotate(-2)")
.transition() .duration(1200) .attr("transform", "rotate(-16)") .ease("cubic-in")
.transition() .duration(1600) .attr("transform", "rotate( -2)") .ease("cubic-out")
wrist
.attr("transform", "rotate(15)")
.transition() .duration(1200) .attr("transform", "rotate( 35)")
.transition() .duration( 200) .attr("transform", "rotate(-10)") .ease("linear")
.transition() .duration(1600) .attr("transform", "rotate( 15)") .ease("cubic-out")
hands[1]
.attr("transform", "rotate(25)")
.transition() .duration(1400) .attr("transform", "rotate( 22)")
.transition() .duration(1600) .attr("transform", "rotate( 25)")
hands[2]
.attr("transform", "rotate(45)")
.transition() .duration(1400) .attr("transform", "rotate( 42)")
.transition() .duration(1600) .attr("transform", "rotate( 45)")
rotateKnuckles(knuckle1s, 0);
rotateKnuckles(knuckle2s, 100);
function rotateKnuckles(knuckles, delay) {
knuckles[0]
.attr("transform", "rotate(45)")
.transition() .duration(1400) .attr("transform", "rotate(85)") .delay(delay)
.transition() .duration( 200) .attr("transform", "rotate(10)") .ease("linear")
.transition() .duration(1900) .attr("transform", "rotate(45)") .ease("cubic-out")
knuckles[1]
.attr("transform", "rotate(35)")
.transition() .duration(1400) .attr("transform", "rotate(80)") .delay(delay)
.transition() .duration( 200) .attr("transform", "rotate(10)") .ease("linear")
.transition() .duration(1900) .attr("transform", "rotate(35)") .ease("cubic-out")
knuckles[2]
.attr("transform", "rotate(35)")
.transition() .duration(1400) .attr("transform", "rotate(70)") .delay(delay)
.transition() .duration( 200) .attr("transform", "rotate(10)") .ease("linear")
.transition() .duration(1900) .attr("transform", "rotate(35)") .ease("cubic-out")
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment