krystus

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.

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/

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()) })