Draw SVG Using JavaScript

Question

I'm trying to recreate this background animation but instead of the random triangles that are drawn using javascript, I want to use three different SVG files.

I tried to replicate the function through this SO article, but couldn't quite get it right.

So my main question is, how and where would I need to manipulate the script to draw SVG's instead of the triangles it's doing now. Or if it's even possible?

My guess would be that it has to do with this part of the script but I'm not 100% sure:

this.draw = function() {
    if(_this.alpha >= 0.005) _this.alpha -= 0.005;
    else _this.alpha = 0;
    ctx.beginPath();
    ctx.moveTo(_this.coords[0].x+_this.pos.x, _this.coords[0].y+_this.pos.y);
    ctx.lineTo(_this.coords[1].x+_this.pos.x, _this.coords[1].y+_this.pos.y);
    ctx.lineTo(_this.coords[2].x+_this.pos.x, _this.coords[2].y+_this.pos.y);
    ctx.closePath();
    ctx.fillStyle = 'rgba('+_this.color+','+ _this.alpha+')';
    ctx.fill();
};

Thanks in advance for any help and let me know if I need to clarify the issue a little more.

You could redraw the same svg with random colors each time and width/height (and ofcourse whatever other thing you want random) — bulanmaster, Feb 26 '16 at 07:35
you are talking about SVG but posted canvas code.. am i missing some thing here?? — Pavan Teja, Feb 26 '16 at 07:39
Per that article you link in the question you want to use ctx.drawImage — Robert Longson, Feb 26 '16 at 07:51
@RobertLongson my question is where would I add that bit of code to the script? — Asitha De Silva, Feb 26 '16 at 08:02
replace all the existing ctx. calls with ctx.drawImage calls. You really want a book on canvas at this point as its hard to learn from scratch in a Q&A way. — Robert Longson, Feb 26 '16 at 08:04

Draw SVG Using JavaScript

0 Answers0