https://sugar-app.com/assets/js/vendors/particles/particles-spray.js

1var Canvas = document.getElementById('particle_art_mobile');
2var ctx = Canvas.getContext('2d');
3
4var resize = function() {
5    Canvas.width = Canvas.clientWidth;
6    Canvas.height = Canvas.clientHeight;
7};
8window.addEventListener('resize', resize);
9resize();
10
11var elements = [];
12var presets = {};
13
14presets.o = function (x, y, s, dx, dy) {
15    return {
16        x: x,
17        y: y,
18        r: 50 * s,
19        w: 10 * s,
20        dx: dx,
21        dy: dy,
22        draw: function(ctx, t) {
23            this.x += this.dx;
24            this.y += this.dy;
25            
26            ctx.beginPath();
27            ctx.arc(this.x + + Math.sin((50 + x + (t / 10)) / 100) * 3, this.y + + Math.sin((45 + x + (t / 10)) / 100) * 4, this.r, 0, 2 * Math.PI, false);
28            ctx.lineWidth = this.w;
29            ctx.strokeStyle = '#fff';
30            ctx.stroke();
31        }
32    }
33};
34  
35presets.square = function (x, y, s, dx, dy, dr, r) {
36    r = r || 0;
37    return {
38        x: x + 100,
39        y: y + 100,
40        s: 20 * s,
41        w: 10 * s,
42        r: r,
43        dx: dx,
44        dy: dy,
45        dr: dr,
46        draw: function(ctx, t) {
47            this.x += this.dx;
48            this.y += this.dy;
49            this.r += this.dr;
50            
51            var _this = this;
52            var box = function(x, y, tx, ty, c, o) {
53                o = o || 0;
54                ctx.beginPath();
55                ctx.rect(0, 0, tx / 20, tx / 20);
56                ctx.moveTo(-o + ((_this.s / 5) * x), o + ((_this.s / 5) * y));
57                ctx.lineWidth = _this.w;
58                ctx.strokeStyle = c;
59                ctx.stroke();
60            };
61            
62            ctx.save();
63            
64            ctx.translate(this.x + Math.sin((x + (t / 10)) / 100) * 5, this.y + Math.sin((10 + x + (t / 10)) / 100) * 2);
65            ctx.rotate(this.r / 5 * Math.PI / 180);
66            
67            box(-1, -1, this.x, this.x, '#fff');
68            
69            ctx.restore();
70        }
71    }
72};
73
74presets.x = function (x, y, s, dx, dy, dr, r) {
75    r = r || 0;
76    return {
77        x: x,
78        y: y,
79        s: 50 * s,
80        w: 5 * s,
81        r: r,
82        dx: dx,
83        dy: dy,
84        dr: dr,
85        draw: function(ctx, t) {
86            this.x += this.dx;
87            this.y += this.dy;
88            this.r += this.dr;
89            
90            var _this = this;
91            var line = function(x, y, tx, ty, c, o) {
92                o = o || 0;
93                ctx.beginPath();
94                ctx.moveTo(-o + ((_this.s / 2) * x), o + ((_this.s / 2) * y));
95                ctx.lineTo(-o + ((_this.s / 2) * tx), o + ((_this.s / 2) * ty));
96                ctx.lineWidth = _this.w;
97                ctx.strokeStyle = c;
98                ctx.stroke();
99            };
100            
101            ctx.save();
102            
103            ctx.translate(this.x + Math.sin((x + (t / 10)) / 100) * 5, this.y + Math.sin((10 + x + (t / 10)) / 100) * 2);
104            ctx.rotate(this.r * Math.PI / 180);
105            
106            line(-1, -1, 1, 1, '#fff');
107            line(1, -1, -1, 1, '#fff');
108            
109            ctx.restore();
110        }
111    }
112};
113
114for(var x = 0; x < Canvas.width; x++) {
115    for(var y = 0; y < Canvas.height; y++) {
116        if(Math.round(Math.random() * 50000) == 1) {
117            var s = ((Math.random() * 5) + 1) / 10;
118              elements.push(presets.square(x, y , s, 0, 0, ((Math.random() * 3) - 1) / 5, (Math.random() * 360)));
119            if(Math.round(Math.random()) == 1){
120              elements.push(presets.o(x, y, s, 0, 0));
121            } else {
122              elements.push(presets.x(x, y , s, 0, 0, ((Math.random() * 3) - 1) / 10, (Math.random() * 360)));
123            }
124        }
125    }
126}
127
128setInterval(function() {
129    ctx.clearRect(0, 0, Canvas.width, Canvas.height);
130
131    var time = new Date().getTime();
132    for (var e in elements)
133		elements[e].draw(ctx, time);
134}, 0.2);