CoffeeScript to load SVG, extract all paths, and render them using Raphaël JS

gistfile1.coffee

$ ->
  # load some SVG, call render() on successful load
  $.ajax(
    url : "data/file.svg"
    dataType : "xml"
    success : render
  )

render = (data) ->
  srcPaths = SVGExtractPaths.extract data
  
  paper = Raphael $("#anim1"), 0, 900
  
  # paths will be an array of our actual Raphael path objects
  [paths, c] = [[], 0]
  
  paths[c++] = paper.path srcPaths[p] for p of srcPaths
  
  # set some attributes on each path
  setAttributes path for path in paths
  
  # create a nice animation
  anim = Raphael.animation(
    {
      "opacity" : "1"
      "transform" : "t300,101"
    },
    600,
    "elastic"
  )
  
  d = 1000
  
  # apply the animation to each path
  path.animate(anim.delay(d += 50)) for path in paths

setAttributes = (letter) ->
  letter.attr "fill", "#939598"
  letter.attr "stroke", "#F1F2F2"
  letter.attr "stroke-width", "0.4"
  letter.attr "stroke-miterlimit", "10"
  letter.attr "opacity", "0"

class SVGExtractPaths
  # returns an object with IDs as keys and SVG path strings as values
  @extract : (data) ->
    ret = {}
    
    # give each path an id as id0..idN
    # (might be better to get the ID of the path element if it has one...)
    $(data).find("path").each (i, e) =>
      ret["id#{i}"] =  $(e).attr("d")
    
    ret