TweenLite result to svg or any other vector format?

[krystus]

I build something really cool on TweenLite and now I want that for my image banners. Is there some option to save my canvas to svg or any other vector base file? Just look at my example. I'm pretty new in JavaScript world.

 

http://dariuszlorek.nazwa.pl/thewebcookies/white/

 

I want just export result after animation to vector file format for example svg.

jQuery(function (t) {
  function e () {
    if (s = window.innerWidth, v = window.innerHeight, m = {
        x: s / 2,
        y: v / 2
      }, f = document.getElementById('main')) {
      f.style.height = v + 'px', u = document.getElementById('canvas'), u.width = s, u.height = v, w = u.getContext('2d'), g = []
      for (var t = 0; 2e3 > t; t += 50)
        for (var e = 0; 1e3 > e; e += 25) {
          var i = t + Math.random() * s / 40, n = e + Math.random() * v / 40, o = {
              x: i,
              originX: i,
              y: n,
              originY: n
          }
          g.push(o)
      }
      for (var a = 0; a < g.length; a++) {
        for (var r = [], c = g[a], l = 0; l < g.length; l++) {
          var y = g[l]
          if (c != y) {
            for (var M = !1, x = 0; 5 > x; x++)
              M || void 0 == r[x] && (r[x] = y, M = !0)
            for (var x = 0; 5 > x; x++)
              M || h(c, y) < h(c, r[x]) && (r[x] = y, M = !0)
          }
        }
        c.closest = r
      }
      for (var a in g) {
        var p = new d(g[a], 2 + 2 * Math.random(), 'rgba(255,255,255,0.3)')
        g[a].circle = p
      }
    }
  }
  function i () {
    'ontouchstart' in window, window.addEventListener('scroll', n), window.addEventListener('resize', o)
  }
  function n () {
    y = document.body.scrollTop > v ? !1 : !0
  }
  function o () {
    s = window.innerWidth, v = window.innerHeight, f.style.height = v + 'px', u.width = s, u.height = v
  }
  function a () {
    r()
    for (var t in g)
      c(g[t])
  }
  function r () {
    if (y) {
      w.clearRect(0, 0, s, v)
      for (var t in g)
        Math.abs(h(m, g[t])) < 4e3 ? (g[t].active = .6, g[t].circle.active = .9) : Math.abs(h(m, g[t])) < 2e4 ? (g[t].active = .2, g[t].circle.active = .6) : Math.abs(h(m, g[t])) < 4e4 ? (g[t].active = .02, g[t].circle.active = .2) : (g[t].active = 0, g[t].circle.active = 0), l(g[t]), g[t].circle.draw()
    }
    requestAnimationFrame(r)
  }
  function c (t) {
    TweenLite.to(t, 1 + 1 * Math.random(), {
      x: t.originX - 50 + 100 * Math.random(),
      y: t.originY - 50 + 100 * Math.random(),
      ease: Circ.easeInOut,
      onComplete: function () {}
    })
  }
  function l (t) {
    if (t.active)
      for (var e in t.closest)
        w.beginPath(), w.moveTo(t.x, t.y), w.lineTo(t.closest[e].x, t.closest[e].y), w.strokeStyle = 'rgba(192,57,44,' + t.active + ')', w.stroke()
  }
  function d (t, e, i) {
    var n = this
    !function () {
      n.pos = t || null, n.radius = e || null, n.color = i || null
    }(), this.draw = function () {
      n.active && (w.beginPath(), w.arc(n.pos.x, n.pos.y, n.radius, 0, 2 * Math.PI, !1), w.fillStyle = 'rgba(189,32,41,' + n.active + ')', w.fill())
    }
  }
  function h (t, e) {
    return Math.pow(t.x - e.x, 2) + Math.pow(t.y - e.y, 2)
  }
  var s, v, f, u, w, g, m, y = !0
  f = document.getElementById('main'), f && (e(), a(), i())
})

[krystus]

By some really messy try and fails method I have working option for png version. Still fighting with svg. If someone can help me with that...

 

http://jsfiddle.net/8tcdkmxr/

[OSUblake]

Why do you want to convert it? Creating an image from canvas is trivial. Creating an SVG from canvas is not. SVG uses elements, just like HTML. You would have to convert everything being displayed on your canvas into an SVG element.

[krystus]

Why do you want to convert it? Creating an image from canvas is trivial. Creating an SVG from canvas is not. SVG uses elements, just like HTML. You would have to convert everything being displayed on your canvas into an SVG element.

 

I want it for design purpose. It's hard to make the same dots and lines in vector... so I want to convert it and use that in Illustrator. SVG is vector based so later Illustrator will make path from that. Now I have working example for png version... but don't have idea how to make svg from it.

[Jonathan]

Why not import the PNG image into Illustrator and then trace the PNG image with the vector tools in Illustrator, then export out as SVG

[OSUblake]

It's really hard to understand your code as you're using letters for everything. But wherever you draw your lines and circles, you would create an SVG equivalent, but only once. Since you're trying to use the SVG in Illustrator, you will probably have to set everything with attributes instead of CSS. You can use and the AttrPlugin to help out. Here's an example of how to create a line and a circle.

See the Pen e2d0957b41527ea4804a2f46814ff4e0?editors=0010 by osublake (@osublake) on CodePen

 

If you need more help understanding SVGs, I used this site a lot...

http://tutorials.jenkov.com/svg/index.html