Drawing an animated line using javascript (without Raphael or other plugins)

Question

I am trying to draw an animated line inside an SVG element. i.e the line draws over a period of time.

I've searched, but all answers usually point to Raphael library. I however, cannot use any libraries available on the internet.

Need some pointers on where to start.

I don't know where to start. Because, everywhere I search points to some library. I am reading http://www.schillmania.com/content/projects/javascript-animation-1/ currently. — Prashanth Subramanian, Mar 07 '13 at 09:03
'closed as not a real question' by users who have no interest in animating paths in javascript. — captainill, Oct 16 '15 at 00:34

RoToRa · Accepted Answer · 2013-03-09T08:24:06.500

4

I've never, ever worked with SVG in my live, yet in 10 minutes after a quick google I came up with:

<svg width=200 height=200>
    <line id="myLine" x1="5" y1="10" x2="5" y2="10" stroke-width=".5" stroke="red"/>
</svg>
<script>
var line = document.getElementById('myLine');
var count = 0;
var interval = window.setInterval(function() {
    line.setAttribute('y2', 2 + +line.getAttribute('y2'));
    line.setAttribute('x2', 1 + +line.getAttribute('x2'));
    if (count++ > 75)
        window.clearInterval(interval);
}, 100);
</script>

See: http://jsfiddle.net/YSmDH/

edited Mar 09 '13 at 08:24

answered Mar 08 '13 at 11:46

RoToRa

37,635
12
69
105

Thank you. I did search. – Prashanth Subramanian Mar 09 '13 at 06:10
Hi RoToRa, can you please tell me what 2 + + does? – Prashanth Subramanian Mar 10 '13 at 12:52
The second `+` is the unary plus operator. It's a short cut to convert a string into a number. See: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators – RoToRa Mar 11 '13 at 11:28

Jan Hommes · Answer 2 · 2013-03-07T09:05:07.263

0

You should use the <canvas id='mycanvas' width='300' height='300' /> element and draw your line like this:

function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

   // use getContext to use the canvas for drawing
   var ctx = canvas.getContext('2d');

   // Stroked triangle
   ctx.beginPath();
   ctx.moveTo(125,125);
   ctx.lineTo(125,45);
   ctx.lineTo(45,125);
   ctx.closePath();
   ctx.stroke();

  }
}

By adding a timeout and clearing your 2D-Context and afterwards creating it new, you can animate your line

This is a very good tutorial for canvas manipulation.

edited Mar 07 '13 at 09:05

answered Mar 07 '13 at 08:59

Jan Hommes

5,122
4
33
45

Hi Jan, Thanks. But I do know how to draw lines inside Canvas/SVG. I am trying to animate the drawing process, and thats what my question is about. – Prashanth Subramanian Mar 07 '13 at 09:01
@Prashanth Subramanian Iyer: See additions. – Jan Hommes Mar 07 '13 at 09:05

Drawing an animated line using javascript (without Raphael or other plugins)

2 Answers2