Animating a SVG path

Posted by Dan Nafe on Mar 12, 2007

My goal is to end up with a QTmovie of a progressively drawn path.

I have drawn a squiggly line in Inkscape and saved it as an svg file

My code (below) draws the line/path all at once. I need to draw it frame by frame.

What am i doing wrong?

svg = ximport("svg")

size(800,600)
speed(25)

def setup():
global i, c1, points, countPoints, oldPoint
points = []
path = svg.parse(open("drawing.svg").read())
i = 0
countPoints = 0
c1 = color(1,1,1,1)
fill(c1)
rect(0,0,WIDTH,HEIGHT)
c1 = color(0,1,0,0.66)
for point in path:
points.append(point)
countPoints += 1
oldPoint = points[0]

def draw():
global i, c1, points, countPoints, oldPoint
fill(c1)
rect (0,0, HEIGHT, WIDTH)
nofill()
stroke(1,0,0)
strokewidth(2)
autoclosepath(close=False)
beginpath(oldPoint)
drawpath(points[i])
endpath(points[i])
oldPoint = points[i]

if i < countPoints -1:
i += 1

Posted by Tom De Smedt on Mar 16, 2007

Hi Dan,

Try out the following code:

svg = ximport("svg")
 
size(800,600)
speed(25)
 
def setup():
 
    global i, points
 
    i = 0
    points = []
    path = svg.parse(open("drawing.svg").read())
     
    # Return value of svg.parse() is a list of BezierPaths.
    # Take the first. Otherwise, your first element in
    # the points list is the full path, on which you
    # then apply a drawpath() which draws it in full..
    path = path[0]
 
    # Take 500 points on the path.
    for point in path.points(500):
        points.append(point)
 
 
def draw():
    
    global i, points
    
    fill(0,1,0,0.66)
    rect (0,0, HEIGHT, WIDTH)
    
    nofill()
    stroke(1,0,0)
    strokewidth(2)
    
    autoclosepath(close=False)
    beginpath(points[0].x , points[0].y)
    for j in range(i):
        # You need lineto() here instead of drawpath().
        lineto(points[j].x, points[j].y)
    endpath()
 
    if i < len(points):
        i += 1

Posted by Jimmy on Jan 27, 2008

Awesome stuff

Posted by Jimmy on Jan 27, 2008

How does this work if I have 2 or more paths in the same svg file?

;-) Thanks

NodeBox

Animating a SVG path