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

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.