Skip to content

Instantly share code, notes, and snippets.

@enthal

enthal/index.html

Last active November 14, 2020 02:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save enthal/3a7e4923c274cb678f60 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save enthal/3a7e4923c274cb678f60 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. enthal revised this gist Nov 14, 2020. No changes.
  2. enthal revised this gist Aug 22, 2015. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -111,19 +111,19 @@
    knuckles[0]
    .attr("transform", "rotate(45)")
    .transition() .duration(1400) .attr("transform", "rotate(85)") .delay(delay)
    .transition() .duration( 200) .attr("transform", "rotate(20)") .ease("linear")
    .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(60)") .delay(delay)
    .transition() .duration( 200) .attr("transform", "rotate(20)") .ease("linear")
    .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(40)") .delay(delay)
    .transition() .duration( 200) .attr("transform", "rotate(20)") .ease("linear")
    .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")
    }

  3. enthal revised this gist Aug 21, 2015. 1 changed file with 29 additions and 27 deletions.
    56 changes: 29 additions & 27 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,10 +13,10 @@
    stroke: none;
    pointer-events: all;
    }
    svg .arm line { stroke-opacity: 1.0; stroke-width: 24px; }
    svg .hand line { stroke-opacity: 0.6; stroke-width: 20px; }
    svg .finger1 line { stroke-opacity: 0.4; stroke-width: 12px; }
    svg .finger2 line { stroke-opacity: 0.3; stroke-width: 10px; }
    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>

    @@ -84,45 +84,47 @@

    function move() {
    arm
    .attr("transform", "rotate(0)")
    .attr("transform", "rotate(-2)")
    .transition() .duration(1200) .attr("transform", "rotate(-16)") .ease("cubic-in")
    .transition() .duration(1600) .attr("transform", "rotate( -2)") .ease("cubic-out");
    .transition() .duration(1600) .attr("transform", "rotate( -2)") .ease("cubic-out")

    wrist
    .attr("transform", "rotate(10)")
    .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( 20)");
    .transition() .duration(1600) .attr("transform", "rotate( 15)") .ease("cubic-out")

    hands[1]
    .attr("transform", "rotate(20)")
    .transition() .duration(1800) .attr("transform", "rotate( 18)");
    .attr("transform", "rotate(25)")
    .transition() .duration(1400) .attr("transform", "rotate( 22)")
    .transition() .duration(1600) .attr("transform", "rotate( 25)")

    hands[2]
    .attr("transform", "rotate(40)")
    .transition() .duration(1800) .attr("transform", "rotate( 35)");
    .attr("transform", "rotate(45)")
    .transition() .duration(1400) .attr("transform", "rotate( 42)")
    .transition() .duration(1600) .attr("transform", "rotate( 45)")

    rotateKnuckles(knuckle1s);
    rotateKnuckles(knuckle2s);
    rotateKnuckles(knuckle1s, 0);
    rotateKnuckles(knuckle2s, 100);

    function rotateKnuckles(knuckles) {
    function rotateKnuckles(knuckles, delay) {
    knuckles[0]
    .attr("transform", "rotate(20)")
    .transition() .duration(1400) .attr("transform", "rotate(85)")
    .transition() .duration( 300) .attr("transform", "rotate(20)") .ease("linear")
    .transition() .duration(1600) .attr("transform", "rotate(45)");
    .attr("transform", "rotate(45)")
    .transition() .duration(1400) .attr("transform", "rotate(85)") .delay(delay)
    .transition() .duration( 200) .attr("transform", "rotate(20)") .ease("linear")
    .transition() .duration(1900) .attr("transform", "rotate(45)") .ease("cubic-out")

    knuckles[1]
    .attr("transform", "rotate(15)")
    .transition() .duration(1400) .attr("transform", "rotate(60)")
    .transition() .duration( 300) .attr("transform", "rotate(20)") .ease("linear")
    .transition() .duration(1600) .attr("transform", "rotate(45)");
    .attr("transform", "rotate(35)")
    .transition() .duration(1400) .attr("transform", "rotate(60)") .delay(delay)
    .transition() .duration( 200) .attr("transform", "rotate(20)") .ease("linear")
    .transition() .duration(1900) .attr("transform", "rotate(35)") .ease("cubic-out")

    knuckles[2]
    .attr("transform", "rotate(15)")
    .transition() .duration(1400) .attr("transform", "rotate(40)")
    .transition() .duration( 300) .attr("transform", "rotate(20)") .ease("linear")
    .transition() .duration(1600) .attr("transform", "rotate(45)");
    .attr("transform", "rotate(35)")
    .transition() .duration(1400) .attr("transform", "rotate(40)") .delay(delay)
    .transition() .duration( 200) .attr("transform", "rotate(20)") .ease("linear")
    .transition() .duration(1900) .attr("transform", "rotate(35)") .ease("cubic-out")
    }

    }
  4. enthal revised this gist Aug 21, 2015. 1 changed file with 26 additions and 20 deletions.
    46 changes: 26 additions & 20 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,10 +13,10 @@
    stroke: none;
    pointer-events: all;
    }
    svg g.arm line { stroke-opacity: 1.0; stroke-width: 12px; }
    svg g.hand line { stroke-opacity: 0.6; stroke-width: 7px; }
    svg g.finger1 line { stroke-opacity: 0.4; stroke-width: 4.5px; }
    svg g.finger2 line { stroke-opacity: 0.3; stroke-width: 3px; }
    svg .arm line { stroke-opacity: 1.0; stroke-width: 24px; }
    svg .hand line { stroke-opacity: 0.6; stroke-width: 20px; }
    svg .finger1 line { stroke-opacity: 0.4; stroke-width: 12px; }
    svg .finger2 line { stroke-opacity: 0.3; stroke-width: 10px; }

    </style>

    @@ -32,13 +32,13 @@
    .attr("height", height);

    var arm = svg.append("g").classed("arm", true)
    .attr("transform", "translate(100,200)")
    .attr("transform", "translate(100,200) scale(1.2)")
    .append("g");
    arm.append("line")
    .attr("x2", 200);
    .attr("x2", 250);

    var wrist = arm.append("g")
    .attr("transform", "translate(200)")
    .attr("transform", "translate(250)")
    .append("g");

    var hands = [];
    @@ -85,38 +85,44 @@
    function move() {
    arm
    .attr("transform", "rotate(0)")
    .transition() .duration(900) .attr("transform", "rotate(-10)") .ease("ease-in")
    .transition() .duration(600) .attr("transform", "rotate(-8)")
    .transition() .duration(600) .attr("transform", "rotate(-2)") .ease("ease-out");
    .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( 900) .attr("transform", "rotate(50)") .ease("ease-out")
    .transition() .duration(1400) .attr("transform", "rotate(70)");
    .attr("transform", "rotate(10)")
    .transition() .duration(1200) .attr("transform", "rotate( 35)")
    .transition() .duration( 200) .attr("transform", "rotate(-10)") .ease("linear")
    .transition() .duration(1600) .attr("transform", "rotate( 20)");

    hands[1]
    .attr("transform", "rotate(-30)")
    .transition() .duration(1800) .attr("transform", "rotate(-20)") .ease("linear");
    .attr("transform", "rotate(20)")
    .transition() .duration(1800) .attr("transform", "rotate( 18)");

    hands[2]
    .attr("transform", "rotate(-50)")
    .transition() .duration(1800) .attr("transform", "rotate(-35)") .ease("linear");
    .attr("transform", "rotate(40)")
    .transition() .duration(1800) .attr("transform", "rotate( 35)");

    rotateKnuckles(knuckle1s);
    rotateKnuckles(knuckle2s);

    function rotateKnuckles(knuckles) {
    knuckles[0]
    .attr("transform", "rotate(20)")
    .transition() .duration(1900) .attr("transform", "rotate(85)") .ease("ease-out");
    .transition() .duration(1400) .attr("transform", "rotate(85)")
    .transition() .duration( 300) .attr("transform", "rotate(20)") .ease("linear")
    .transition() .duration(1600) .attr("transform", "rotate(45)");

    knuckles[1]
    .attr("transform", "rotate(15)")
    .transition() .duration(1800) .attr("transform", "rotate(60)") .ease("ease-out");
    .transition() .duration(1400) .attr("transform", "rotate(60)")
    .transition() .duration( 300) .attr("transform", "rotate(20)") .ease("linear")
    .transition() .duration(1600) .attr("transform", "rotate(45)");

    knuckles[2]
    .attr("transform", "rotate(15)")
    .transition() .duration(1700) .attr("transform", "rotate(40)") .ease("ease-out");
    .transition() .duration(1400) .attr("transform", "rotate(40)")
    .transition() .duration( 300) .attr("transform", "rotate(20)") .ease("linear")
    .transition() .duration(1600) .attr("transform", "rotate(45)");
    }

    }
  5. enthal revised this gist Aug 19, 2015. No changes.
  6. enthal revised this gist Aug 19, 2015. 1 changed file with 13 additions and 19 deletions.
    32 changes: 13 additions & 19 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -102,29 +102,23 @@
    .attr("transform", "rotate(-50)")
    .transition() .duration(1800) .attr("transform", "rotate(-35)") .ease("linear");

    knuckle1s[0]
    .attr("transform", "rotate(20)")
    .transition() .duration(1900) .attr("transform", "rotate(85)") .ease("ease-out");
    rotateKnuckles(knuckle1s);
    rotateKnuckles(knuckle2s);

    knuckle1s[1]
    .attr("transform", "rotate(15)")
    .transition() .duration(1800) .attr("transform", "rotate(60)") .ease("ease-out");
    function rotateKnuckles(knuckles) {
    knuckles[0]
    .attr("transform", "rotate(20)")
    .transition() .duration(1900) .attr("transform", "rotate(85)") .ease("ease-out");

    knuckle1s[2]
    .attr("transform", "rotate(15)")
    .transition() .duration(1700) .attr("transform", "rotate(40)") .ease("ease-out");
    knuckles[1]
    .attr("transform", "rotate(15)")
    .transition() .duration(1800) .attr("transform", "rotate(60)") .ease("ease-out");

    knuckle2s[0]
    .attr("transform", "rotate(20)")
    .transition() .duration(1900) .attr("transform", "rotate(85)") .ease("ease-out");
    knuckles[2]
    .attr("transform", "rotate(15)")
    .transition() .duration(1700) .attr("transform", "rotate(40)") .ease("ease-out");
    }

    knuckle2s[1]
    .attr("transform", "rotate(15)")
    .transition() .duration(1800) .attr("transform", "rotate(60)") .ease("ease-out");

    knuckle2s[2]
    .attr("transform", "rotate(15)")
    .transition() .duration(1700) .attr("transform", "rotate(40)") .ease("ease-out");
    }

    </script>
  7. enthal revised this gist Aug 19, 2015. 1 changed file with 19 additions and 16 deletions.
    35 changes: 19 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,17 +4,20 @@
    <style>
    svg {
    fill: none;
    stroke: #000;
    stroke: #300;
    stroke-width: 4px;
    stroke-linecap: round;
    }
    svg rect.mouse {
    fill: none;
    stroke: none;
    pointer-events: all;
    }
    svg .hand > line {
    stroke: green;
    }
    svg g.arm line { stroke-opacity: 1.0; stroke-width: 12px; }
    svg g.hand line { stroke-opacity: 0.6; stroke-width: 7px; }
    svg g.finger1 line { stroke-opacity: 0.4; stroke-width: 4.5px; }
    svg g.finger2 line { stroke-opacity: 0.3; stroke-width: 3px; }

    </style>

    <body></body>
    @@ -28,21 +31,21 @@
    .attr("width", width)
    .attr("height", height);

    var g0 = svg.append("g")
    var arm = svg.append("g").classed("arm", true)
    .attr("transform", "translate(100,200)")
    .append("g");
    g0.append("line")
    arm.append("line")
    .attr("x2", 200);

    var wrist = g0.append("g")
    var wrist = arm.append("g")
    .attr("transform", "translate(200)")
    .append("g");

    var hands = [];
    var knuckle1s = [];
    var knuckle2s = [];

    function addHand(length) {
    function addHandPart(length) {
    var hand = wrist.append("g").classed("hand", true);
    hands.push(hand);
    hand.append("line")
    @@ -53,7 +56,7 @@
    .append("g")
    knuckle1s.push(knuckle1);

    var finger1 = knuckle1.append("g");
    var finger1 = knuckle1.append("g").classed("finger1", true);
    finger1.append("line")
    .attr("x2", 2*length/3);

    @@ -62,14 +65,14 @@
    .append("g")
    knuckle2s.push(knuckle2);

    var finger2 = knuckle2.append("g");
    var finger2 = knuckle2.append("g").classed("finger2", true);
    finger2.append("line")
    .attr("x2", length/3);
    }

    addHand(100);
    addHand(120);
    addHand(110);
    addHandPart(100);
    addHandPart(120);
    addHandPart(110);

    svg.append("rect").classed("mouse", true)
    .attr("width", width)
    @@ -80,7 +83,7 @@
    move();

    function move() {
    g0
    arm
    .attr("transform", "rotate(0)")
    .transition() .duration(900) .attr("transform", "rotate(-10)") .ease("ease-in")
    .transition() .duration(600) .attr("transform", "rotate(-8)")
    @@ -101,7 +104,7 @@

    knuckle1s[0]
    .attr("transform", "rotate(20)")
    .transition() .duration(1900) .attr("transform", "rotate(100)") .ease("ease-out");
    .transition() .duration(1900) .attr("transform", "rotate(85)") .ease("ease-out");

    knuckle1s[1]
    .attr("transform", "rotate(15)")
    @@ -113,7 +116,7 @@

    knuckle2s[0]
    .attr("transform", "rotate(20)")
    .transition() .duration(1900) .attr("transform", "rotate(100)") .ease("ease-out");
    .transition() .duration(1900) .attr("transform", "rotate(85)") .ease("ease-out");

    knuckle2s[1]
    .attr("transform", "rotate(15)")
  8. enthal revised this gist Aug 19, 2015. 1 changed file with 34 additions and 12 deletions.
    46 changes: 34 additions & 12 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,22 +39,32 @@
    .append("g");

    var hands = [];
    var knuckles = [];
    var knuckle1s = [];
    var knuckle2s = [];

    function addHand(length) {
    var hand = wrist.append("g").classed("hand", true);
    hands.push(hand);
    hand.append("line")
    .attr("x2", length);

    var knuckle = hand.append("g")
    var knuckle1 = hand.append("g")
    .attr("transform", "translate("+length+")")
    .append("g")
    knuckles.push(knuckle);
    knuckle1s.push(knuckle1);

    var finger = knuckle.append("g");
    finger.append("line")
    .attr("x2", 50);
    var finger1 = knuckle1.append("g");
    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");
    finger2.append("line")
    .attr("x2", length/3);
    }

    addHand(100);
    @@ -72,9 +82,9 @@
    function move() {
    g0
    .attr("transform", "rotate(0)")
    .transition() .duration(900) .attr("transform", "rotate(-25)") .ease("ease-in")
    .transition() .duration(600) .attr("transform", "rotate(-22)")
    .transition() .duration(600) .attr("transform", "rotate(-10)") .ease("ease-out");
    .transition() .duration(900) .attr("transform", "rotate(-10)") .ease("ease-in")
    .transition() .duration(600) .attr("transform", "rotate(-8)")
    .transition() .duration(600) .attr("transform", "rotate(-2)") .ease("ease-out");

    wrist
    .attr("transform", "rotate(-15)")
    @@ -89,15 +99,27 @@
    .attr("transform", "rotate(-50)")
    .transition() .duration(1800) .attr("transform", "rotate(-35)") .ease("linear");

    knuckles[0]
    knuckle1s[0]
    .attr("transform", "rotate(20)")
    .transition() .duration(1900) .attr("transform", "rotate(100)") .ease("ease-out");

    knuckle1s[1]
    .attr("transform", "rotate(15)")
    .transition() .duration(1800) .attr("transform", "rotate(60)") .ease("ease-out");

    knuckle1s[2]
    .attr("transform", "rotate(15)")
    .transition() .duration(1700) .attr("transform", "rotate(40)") .ease("ease-out");

    knuckle2s[0]
    .attr("transform", "rotate(20)")
    .transition() .duration(1900) .attr("transform", "rotate(100)") .ease("ease-out");

    knuckles[1]
    knuckle2s[1]
    .attr("transform", "rotate(15)")
    .transition() .duration(1800) .attr("transform", "rotate(60)") .ease("ease-out");

    knuckles[2]
    knuckle2s[2]
    .attr("transform", "rotate(15)")
    .transition() .duration(1700) .attr("transform", "rotate(40)") .ease("ease-out");
    }
  9. enthal revised this gist Aug 19, 2015. 1 changed file with 10 additions and 39 deletions.
    49 changes: 10 additions & 39 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -72,63 +72,34 @@
    function move() {
    g0
    .attr("transform", "rotate(0)")
    .transition()
    .duration(900)
    .ease("ease-in")
    .attr("transform", "rotate(-25)")
    .transition()
    .duration(600)
    // .ease("linear")
    .attr("transform", "rotate(-22)")
    .transition()
    .duration(600)
    .ease("ease-out")
    .attr("transform", "rotate(-10)");
    .transition() .duration(900) .attr("transform", "rotate(-25)") .ease("ease-in")
    .transition() .duration(600) .attr("transform", "rotate(-22)")
    .transition() .duration(600) .attr("transform", "rotate(-10)") .ease("ease-out");

    wrist
    .attr("transform", "rotate(-15)")
    .transition()
    .duration(900)
    .ease("ease-out")
    .attr("transform", "rotate(50)")
    .transition()
    .duration(1400)
    .attr("transform", "rotate(70)");
    .transition() .duration( 900) .attr("transform", "rotate(50)") .ease("ease-out")
    .transition() .duration(1400) .attr("transform", "rotate(70)");

    hands[1]
    .attr("transform", "rotate(-30)")
    .transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(-20)");
    .transition() .duration(1800) .attr("transform", "rotate(-20)") .ease("linear");

    hands[2]
    .attr("transform", "rotate(-50)")
    .transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(-35)");
    .transition() .duration(1800) .attr("transform", "rotate(-35)") .ease("linear");

    knuckles[0]
    .attr("transform", "rotate(20)")
    .transition()
    .duration(1900)
    .ease("ease-out")
    .attr("transform", "rotate(100)");
    .transition() .duration(1900) .attr("transform", "rotate(100)") .ease("ease-out");

    knuckles[1]
    .attr("transform", "rotate(15)")
    .transition()
    .duration(1800)
    .ease("ease-out")
    .attr("transform", "rotate(60)");
    .transition() .duration(1800) .attr("transform", "rotate(60)") .ease("ease-out");

    knuckles[2]
    .attr("transform", "rotate(15)")
    .transition()
    .duration(1700)
    .ease("ease-out")
    .attr("transform", "rotate(40)");
    .transition() .duration(1700) .attr("transform", "rotate(40)") .ease("ease-out");
    }

    </script>
  10. enthal revised this gist Aug 19, 2015. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -59,6 +59,7 @@

    addHand(100);
    addHand(120);
    addHand(110);

    svg.append("rect").classed("mouse", true)
    .attr("width", width)
    @@ -101,6 +102,13 @@
    .ease("linear")
    .attr("transform", "rotate(-20)");

    hands[2]
    .attr("transform", "rotate(-50)")
    .transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(-35)");

    knuckles[0]
    .attr("transform", "rotate(20)")
    .transition()
    @@ -114,6 +122,13 @@
    .duration(1800)
    .ease("ease-out")
    .attr("transform", "rotate(60)");

    knuckles[2]
    .attr("transform", "rotate(15)")
    .transition()
    .duration(1700)
    .ease("ease-out")
    .attr("transform", "rotate(40)");
    }

    </script>
  11. enthal revised this gist Aug 19, 2015. 1 changed file with 14 additions and 15 deletions.
    29 changes: 14 additions & 15 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -38,28 +38,27 @@
    .attr("transform", "translate(200)")
    .append("g");

    var hand1 = wrist.append("g").classed("hand", true);
    hand1.append("line")
    .attr("x2", 100);
    var hands = [];
    var knuckles = [];

    var hand2 = wrist.append("g").classed("hand", true);
    hand2.append("line")
    .attr("x2", 120)
    function addHand(length) {
    var hand = wrist.append("g").classed("hand", true);
    hands.push(hand);
    hand.append("line")
    .attr("x2", length);

    function addKnuckleFinger(hand, distance) {
    var knuckle = hand.append("g")
    .attr("transform", "translate("+distance+")")
    .attr("transform", "translate("+length+")")
    .append("g")
    knuckles.push(knuckle);

    var finger = knuckle.append("g");
    finger.append("line")
    .attr("x2", 50);

    return knuckle;
    }

    knuckle1 = addKnuckleFinger(hand1, 100);
    knuckle2 = addKnuckleFinger(hand2, 120);
    addHand(100);
    addHand(120);

    svg.append("rect").classed("mouse", true)
    .attr("width", width)
    @@ -95,21 +94,21 @@
    .duration(1400)
    .attr("transform", "rotate(70)");

    hand2
    hands[1]
    .attr("transform", "rotate(-30)")
    .transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(-20)");

    knuckle1
    knuckles[0]
    .attr("transform", "rotate(20)")
    .transition()
    .duration(1900)
    .ease("ease-out")
    .attr("transform", "rotate(100)");

    knuckle2
    knuckles[1]
    .attr("transform", "rotate(15)")
    .transition()
    .duration(1800)
  12. enthal revised this gist Aug 19, 2015. 1 changed file with 25 additions and 8 deletions.
    33 changes: 25 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,9 @@
    stroke: none;
    pointer-events: all;
    }
    svg .hand > line {
    stroke: green;
    }
    </style>

    <body></body>
    @@ -35,21 +38,28 @@
    .attr("transform", "translate(200)")
    .append("g");

    var hand1 = wrist.append("g");
    var hand1 = wrist.append("g").classed("hand", true);
    hand1.append("line")
    .attr("x2", 100);

    var hand2 = wrist.append("g");
    var hand2 = wrist.append("g").classed("hand", true);
    hand2.append("line")
    .attr("x2", 120)

    var knuckle1 = hand1.append("g")
    .attr("transform", "translate(100)")
    .append("g")
    function addKnuckleFinger(hand, distance) {
    var knuckle = hand.append("g")
    .attr("transform", "translate("+distance+")")
    .append("g")

    var finger = knuckle.append("g");
    finger.append("line")
    .attr("x2", 50);

    return knuckle;
    }

    var finger1 = knuckle1.append("g");
    finger1.append("line")
    .attr("x2", 50);
    knuckle1 = addKnuckleFinger(hand1, 100);
    knuckle2 = addKnuckleFinger(hand2, 120);

    svg.append("rect").classed("mouse", true)
    .attr("width", width)
    @@ -98,6 +108,13 @@
    .duration(1900)
    .ease("ease-out")
    .attr("transform", "rotate(100)");

    knuckle2
    .attr("transform", "rotate(15)")
    .transition()
    .duration(1800)
    .ease("ease-out")
    .attr("transform", "rotate(60)");
    }

    </script>
  13. enthal revised this gist Aug 19, 2015. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,11 @@
    stroke: #000;
    stroke-width: 4px;
    }
    svg rect.mouse {
    fill: none;
    stroke: none;
    pointer-events: all;
    }
    </style>

    <body></body>
    @@ -46,6 +51,12 @@
    finger1.append("line")
    .attr("x2", 50);

    svg.append("rect").classed("mouse", true)
    .attr("width", width)
    .attr("height", height)
    .on("click", move);


    move();

    function move() {
  14. enthal revised this gist Aug 19, 2015. 1 changed file with 45 additions and 36 deletions.
    81 changes: 45 additions & 36 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,61 +23,70 @@
    var g0 = svg.append("g")
    .attr("transform", "translate(100,200)")
    .append("g");

    g0.append("line")
    .attr("x2", 200);
    g0
    .transition()
    .duration(900)
    .ease("ease-in")
    .attr("transform", "rotate(-25)")
    .transition()
    .duration(600)
    // .ease("linear")
    .attr("transform", "rotate(-22)")
    .transition()
    .duration(600)
    .ease("ease-out")
    .attr("transform", "rotate(-10)");

    var wrist = g0.append("g")
    .attr("transform", "translate(200)")
    .append("g")
    .attr("transform", "rotate(-15)");
    wrist
    .transition()
    .duration(900)
    .ease("ease-out")
    .attr("transform", "rotate(50)")
    .transition()
    .duration(1400)
    .attr("transform", "rotate(70)");
    .append("g");

    var hand1 = wrist.append("g");
    hand1.append("line")
    .attr("x2", 100);

    var hand2 = wrist.append("g");
    hand2
    .attr("transform", "rotate(-30)")
    .transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(-20)");
    hand2.append("line")
    .attr("x2", 120)

    var knuckle1 = hand1.append("g")
    .attr("transform", "translate(100)")
    .append("g")
    .attr("transform", "rotate(20)");
    knuckle1
    .transition()
    .duration(1900)
    .ease("ease-out")
    .attr("transform", "rotate(100)")

    var finger1 = knuckle1.append("g");
    finger1.append("line")
    .attr("x2", 50);

    move();

    function move() {
    g0
    .attr("transform", "rotate(0)")
    .transition()
    .duration(900)
    .ease("ease-in")
    .attr("transform", "rotate(-25)")
    .transition()
    .duration(600)
    // .ease("linear")
    .attr("transform", "rotate(-22)")
    .transition()
    .duration(600)
    .ease("ease-out")
    .attr("transform", "rotate(-10)");

    wrist
    .attr("transform", "rotate(-15)")
    .transition()
    .duration(900)
    .ease("ease-out")
    .attr("transform", "rotate(50)")
    .transition()
    .duration(1400)
    .attr("transform", "rotate(70)");

    hand2
    .attr("transform", "rotate(-30)")
    .transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(-20)");

    knuckle1
    .attr("transform", "rotate(20)")
    .transition()
    .duration(1900)
    .ease("ease-out")
    .attr("transform", "rotate(100)");
    }

    </script>
  15. enthal revised this gist Aug 19, 2015. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -40,7 +40,7 @@
    .ease("ease-out")
    .attr("transform", "rotate(-10)");

    wrist = g0.append("g")
    var wrist = g0.append("g")
    .attr("transform", "translate(200)")
    .append("g")
    .attr("transform", "rotate(-15)");
    @@ -53,10 +53,10 @@
    .duration(1400)
    .attr("transform", "rotate(70)");

    hand1 = wrist.append("g");
    var hand1 = wrist.append("g");
    hand1.append("line")
    .attr("x2", 100);
    hand2 = wrist.append("g");
    var hand2 = wrist.append("g");
    hand2
    .attr("transform", "rotate(-30)")
    .transition()
    @@ -66,7 +66,7 @@
    hand2.append("line")
    .attr("x2", 120)

    knuckle1 = hand1.append("g")
    var knuckle1 = hand1.append("g")
    .attr("transform", "translate(100)")
    .append("g")
    .attr("transform", "rotate(20)");
    @@ -75,7 +75,7 @@
    .duration(1900)
    .ease("ease-out")
    .attr("transform", "rotate(100)")
    finger1 = knuckle1.append("g");
    var finger1 = knuckle1.append("g");
    finger1.append("line")
    .attr("x2", 50);

  16. enthal revised this gist Aug 13, 2015. No changes.
  17. enthal revised this gist Aug 13, 2015. 1 changed file with 19 additions and 6 deletions.
    25 changes: 19 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -53,18 +53,31 @@
    .duration(1400)
    .attr("transform", "rotate(70)");

    finger1 = wrist.append("g")
    finger1.append("line")
    hand1 = wrist.append("g");
    hand1.append("line")
    .attr("x2", 100);
    finger2 = wrist.append("g");
    finger2
    hand2 = wrist.append("g");
    hand2
    .attr("transform", "rotate(-30)")
    .transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(-20)");
    finger2.append("line")
    .attr("x2", 160)
    hand2.append("line")
    .attr("x2", 120)

    knuckle1 = hand1.append("g")
    .attr("transform", "translate(100)")
    .append("g")
    .attr("transform", "rotate(20)");
    knuckle1
    .transition()
    .duration(1900)
    .ease("ease-out")
    .attr("transform", "rotate(100)")
    finger1 = knuckle1.append("g");
    finger1.append("line")
    .attr("x2", 50);


    </script>
  18. enthal revised this gist Aug 13, 2015. 1 changed file with 18 additions and 10 deletions.
    28 changes: 18 additions & 10 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -28,35 +28,43 @@
    .attr("x2", 200);
    g0
    .transition()
    .duration(1000)
    .duration(900)
    .ease("ease-in")
    .attr("transform", "rotate(-25)")
    .transition()
    .duration(600)
    .ease("linear")
    // .ease("linear")
    .attr("transform", "rotate(-22)")
    .transition()
    .duration(600)
    .ease("ease-out")
    .attr("transform", "rotate(-10)");

    g1 = g0.append("g")
    wrist = g0.append("g")
    .attr("transform", "translate(200)")
    .append("g")
    .attr("transform", "rotate(-15)");
    g1.append("line")
    .attr("x2", 100);
    g1.append("line")
    .attr("x2", 150)
    .attr("transform", "rotate(-15)");
    g1
    wrist
    .transition()
    .duration(900)
    .ease("ease-out")
    .attr("transform", "rotate(50)")
    .transition()
    .attr("transform", "rotate(20)");
    .duration(1400)
    .attr("transform", "rotate(70)");

    finger1 = wrist.append("g")
    finger1.append("line")
    .attr("x2", 100);
    finger2 = wrist.append("g");
    finger2
    .attr("transform", "rotate(-30)")
    .transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(-20)");
    finger2.append("line")
    .attr("x2", 160)


    </script>
  19. enthal revised this gist Aug 13, 2015. 1 changed file with 9 additions and 7 deletions.
    16 changes: 9 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,12 +26,13 @@

    g0.append("line")
    .attr("x2", 200);
    g0.transition()
    g0
    .transition()
    .duration(1000)
    .ease("ease-in")
    .attr("transform", "rotate(-25)")
    .transition()
    .duration(300)
    .duration(600)
    .ease("linear")
    .attr("transform", "rotate(-22)")
    .transition()
    @@ -48,12 +49,13 @@
    g1.append("line")
    .attr("x2", 150)
    .attr("transform", "rotate(-15)");
    g1.transition()
    .duration(900)
    .ease("ease-out")
    .attr("transform", "rotate(50)")
    g1
    .transition()
    .duration(900)
    .ease("ease-out")
    .attr("transform", "rotate(50)")
    .transition()
    .attr("transform", "rotate(20)");
    .attr("transform", "rotate(20)");



  20. enthal revised this gist Aug 13, 2015. 1 changed file with 23 additions and 7 deletions.
    30 changes: 23 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,24 +21,40 @@
    .attr("height", height);

    var g0 = svg.append("g")
    .attr("transform", "translate(200,200)");
    .attr("transform", "translate(100,200)")
    .append("g");

    g0.append("line")
    .attr("x2", 100);
    .attr("x2", 200);
    g0.transition()
    .duration(1000)
    .ease("ease-in")
    .attr("transform", "rotate(-25)")
    .transition()
    .duration(300)
    .ease("linear")
    .attr("transform", "rotate(-22)")
    .transition()
    .duration(600)
    .ease("ease-out")
    .attr("transform", "rotate(-10)");

    g1 = g0.append("g")
    .attr("transform", "translate(100)")
    .attr("transform", "translate(200)")
    .append("g")
    .attr("transform", "rotate(-15)");
    g1.append("line")
    .attr("x2", 100);
    g1.append("line")
    .attr("x2", 150)
    .attr("transform", "rotate(-15)");

    g1.transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(160)")
    .duration(900)
    .ease("ease-out")
    .attr("transform", "rotate(50)")
    .transition()
    .attr("transform", "rotate(20)");



    </script>
  21. enthal revised this gist Aug 13, 2015. 1 changed file with 11 additions and 1 deletion.
    12 changes: 11 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,8 +27,18 @@
    .attr("x2", 100);

    g1 = g0.append("g")
    .attr("transform", "translate(100) rotate(-15)");
    .attr("transform", "translate(100)")
    .append("g")
    .attr("transform", "rotate(-15)");
    g1.append("line")
    .attr("x2", 100);
    g1.append("line")
    .attr("x2", 150)
    .attr("transform", "rotate(-15)");

    g1.transition()
    .duration(1800)
    .ease("linear")
    .attr("transform", "rotate(160)")

    </script>
  22. enthal revised this gist Aug 12, 2015. 1 changed file with 10 additions and 2 deletions.
    12 changes: 10 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    svg {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
    stroke-width: 4px;
    }
    </style>

    @@ -20,7 +20,15 @@
    .attr("width", width)
    .attr("height", height);

    svg.append("g").append("line")
    var g0 = svg.append("g")
    .attr("transform", "translate(200,200)");

    g0.append("line")
    .attr("x2", 100);

    g1 = g0.append("g")
    .attr("transform", "translate(100) rotate(-15)");
    g1.append("line")
    .attr("x2", 100);

    </script>
  23. enthal revised this gist Aug 12, 2015. 1 changed file with 13 additions and 4 deletions.
    17 changes: 13 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,26 @@
    <!DOCTYPE html>
    <meta charset="utf-8">

    <style>
    svg {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
    }
    </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 width = 960, height = 500;
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    .attr("width", width)
    .attr("height", height);

    svg.append("g").append("line")
    .attr("x2", 100);

    </script>
  24. enthal created this gist Aug 12, 2015.
    17 changes: 17 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    </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);

    </script>