Animating a line drawn between 2 elements without canvas, linking by ID's

Question

I am using a library called Pattern Lock by Sudhanshu Yadav. Basically it is an mimic of the android pattern lock screen. I am trying to draw an animation, showing the unlock st

Answer 1

DEMO: CODEPEN

Its just plain svg and css keyframe animation. I added separate paths for each of the lines so there are separate animations for all the paths.

For timing and delay look at the animation property's of the different paths.

Like animation: Drawpath 1s linear 2s forwards;
The first number is the duration of the animation so 1 second.

2s is the delay. So there is 2 seconds of delay. Forwards is just that it keeps the end property, we don't want our line to disappear when the animation is done.

.key-anim1 {
  -webkit-animation: Drawpath 1s linear forwards;
  animation: Drawpath 1s linear forwards;
  stroke-dasharray: 0, 100;
}
.key-anim2 {
  -webkit-animation: Drawpath 1s linear 1s forwards;
  animation: Drawpath 1s linear 1s forwards;
  stroke-dasharray: 0, 100;
}
.key-anim3 {
  -webkit-animation: Drawpath 1s linear 2s forwards;
  animation: Drawpath 1s linear 2s forwards;
  stroke-dasharray: 0, 100;
}
@-webkit-keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}
@keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}

<svg class="test" viewbox="0 0 400 200">
  <path class="key-anim1" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M50 50, 100 100" />
  <path class="key-anim2" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M100 100, 150 100" />
  <path class="key-anim3" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M150 100, 150 150" />
  <circle r="10" cy="50" cx="50" fill="#f33" />
  <circle r="10" cy="100" cx="50" fill="#f33" />
  <circle r="10" cy="150" cx="50" fill="#f33" />
  <circle r="10" cy="50" cx="100" fill="#f33" />
  <circle r="10" cy="100" cx="100" fill="#f33" />
  <circle r="10" cy="150" cx="100" fill="#f33" />
  <circle r="10" cy="50" cx="150" fill="#f33" />
  <circle r="10" cy="100" cx="150" fill="#f33" />
  <circle r="10" cy="150" cx="150" fill="#f33" />
</svg>

Answer 2

I don't know if there's a library to help do this, but you could just create your own animation method. I'd create a line element (using a span for example) and create a method that draws a line from one point to another.

You can use jQuery .position() method to get the (x, y) coordinates of your elements and .width() or .height() to change the length of your line. I wrote up a quick fiddle to display how this could work with plain javascript.

http://jsfiddle.net/zaekfzwx/

This only moves from left to right, but you get the general idea on how to create a function to draw to the DOM without using a canvas element. For example, you could use CSS3 rotate transformations to draw the line in another direction, like so:

http://jsfiddle.net/46g8s1xe/

But like Daniel mentioned, the position attributes of the line are right in the HTML for any computer to read, which sort of defeats the point of captcha.

Answer 3

Please try to use this plugin : http://ignitersworld.com/lab/patternLock.html

I hope it will help you ,

Thank you