-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
530 lines (508 loc) · 30.9 KB
/
Copy pathindex.html
File metadata and controls
530 lines (508 loc) · 30.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Create stunning ribbon animations with tsParticles. Lightweight, customizable ribbon effects for any website. Supports React, Vue, Angular, Svelte. Free and open-source."
/>
<meta name="author" content="Matteo Bruni" />
<meta
name="keywords"
content="html css javascript typescript particles js ts jsx tsx canvas ribbons animations react vue angular svelte libraries how to create add"
/>
<meta name="theme-color" content="#393939" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="tsParticles Ribbons | JavaScript Ribbon animations for your website"
/>
<meta
property="og:description"
content="Create stunning ribbon animations with tsParticles. Interactive playground with live code editor. Supports React, Vue, Angular, Svelte, and more."
/>
<meta property="og:url" content="https://ribbons.js.org" />
<meta property="og:site_name" content="tsParticles Ribbons" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://particles.js.org/images/banner3.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="tsParticles Ribbons | JavaScript Ribbon animations for your website"
/>
<meta
name="twitter:description"
content="Create stunning ribbon animations with tsParticles. Interactive playground with live code editor."
/>
<meta name="twitter:image" content="https://particles.js.org/images/banner3.png" />
<link rel="canonical" href="https://ribbons.js.org" />
<link rel="icon" type="image/png" href="https://particles.js.org/tsParticles-64.png" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "tsParticles Ribbons",
"url": "https://ribbons.js.org",
"description": "Interactive ribbon animation playground built with tsParticles. Create customizable ribbon animations with a live code editor.",
"applicationCategory": "Multimedia",
"operatingSystem": "All",
"browserRequirements": "Requires JavaScript",
"author": {
"@type": "Person",
"name": "Matteo Bruni",
"url": "https://github.com/matteobruni"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<title>tsParticles Ribbons | JavaScript Ribbon animations for your website</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet" />
<script type="module" crossorigin src="/assets/index-CTLBMgxm.js"></script>
<link rel="modulepreload" crossorigin href="/assets/Constants-Boin98lu.js">
<link rel="modulepreload" crossorigin href="/assets/TypeUtils-CAcPJyQQ.js">
<link rel="modulepreload" crossorigin href="/assets/MathUtils-DBT3t4S6.js">
<link rel="modulepreload" crossorigin href="/assets/Utils-BJNts6wb.js">
<link rel="modulepreload" crossorigin href="/assets/Stroke-mHi2yCfv.js">
<link rel="stylesheet" crossorigin href="/assets/index-CqJF4STU.css">
</head>
<body>
<svg class="sprite" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="code" viewBox="0 0 14 16">
<path
d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3 9.5 3ZM4.5 3L0 8 4.5 13 6 11.5 2.5 8 6 4.5 4.5 3 4.5 3Z"
/>
</symbol>
<symbol id="heart" viewBox="0 0 12 16">
<path
d="M11.2 3C10.68 2.37 9.95 2.05 9 2 8.03 2 7.31 2.42 6.8 3 6.29 3.58 6.02 3.92 6 4 5.98 3.92 5.72 3.58 5.2 3 4.68 2.42 4.03 2 3 2 2.05 2.05 1.31 2.38 0.8 3 0.28 3.61 0.02 4.28 0 5 0 5.52 0.09 6.52 0.67 7.67 1.25 8.82 3.01 10.61 6 13 8.98 10.61 10.77 8.83 11.34 7.67 11.91 6.51 12 5.5 12 5 11.98 4.28 11.72 3.61 11.2 2.98L11.2 3Z"
/>
</symbol>
<symbol id="run" viewBox="0 0 10 10">
<path d="M2 2L8 6L2 10" />
</symbol>
<symbol id="octo" viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
/>
</symbol>
<symbol id="discord" viewBox="0 0 24 24">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
/>
</symbol>
<symbol id="reddit" viewBox="0 0 24 24">
<path
d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"
/>
</symbol>
</defs>
</svg>
<header>
<div class="header-left">
<a class="header-link" href="/about.html">About</a>
<a class="header-link" href="/blog/index.html">Blog</a>
<a class="header-link" href="/cookie-policy.html">Cookie</a>
<a class="header-link" href="/privacy-policy.html">Privacy</a>
</div>
<div class="header-right">
<button id="themeToggle" title="Switch Theme" class="theme"></button>
<a
class="github-icon"
title="Visit on GitHub"
href="https://github.com/matteobruni/tsparticles"
aria-label="View source on Github"
>
<svg class="icon">
<use xlink:href="#octo"></use>
</svg>
</a>
<a
class="github-icon"
title="Join Discord"
href="https://discord.gg/hACwv45Hme"
aria-label="Join tsParticles Discord"
target="_blank"
rel="noopener noreferrer"
>
<svg class="icon" viewBox="0 0 24 24">
<use xlink:href="#discord"></use>
</svg>
</a>
<a
class="github-icon"
title="Visit Reddit"
href="https://www.reddit.com/r/tsParticles/"
aria-label="Visit tsParticles on Reddit"
target="_blank"
rel="noopener noreferrer"
>
<svg class="icon" viewBox="0 0 24 24">
<use xlink:href="#reddit"></use>
</svg>
</a>
<a
class="github-icon"
title="Visit tsParticles website"
href="https://particles.js.org"
aria-label="Visit tsParticles website"
target="_blank"
rel="noopener noreferrer"
>
<svg class="icon" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true">
<path
d="m84.58 83.16-17.93-17.92a6.29 6.29 0 0 1 -1.41 1.41l18.12 18.12a6.34 6.34 0 0 1 1.22-1.61z"
/>
<path
d="m45.46 87.28 12.45-20.28a5.92 5.92 0 0 1 -1.57-1.27l-12.66 20.63a5.89 5.89 0 0 1 1.78.92z"
/>
<path
d="m88.73 43.74-22.09 12.83a6.83 6.83 0 0 1 .92 1.78l21.88-12.71a7 7 0 0 1 -.71-1.9z"
/>
<path
d="m31.23 40.1-13.29-22.1a5.84 5.84 0 0 1 -1.75 1l13.26 22a3.88 3.88 0 0 1 1.78-.9z"
/>
<path d="m36.4 45.82a4.45 4.45 0 0 1 -1 1.76l19.47 11.33a7.38 7.38 0 0 1 .77-1.86z" />
<path d="m15.79 62.61a7.87 7.87 0 0 1 0 2l38.91-2.25a7.81 7.81 0 0 1 -.11-2z" />
<path
d="m75.8 18.7-13.28 35.39a6.58 6.58 0 0 1 1.91.61l13.21-35.22a6.23 6.23 0 0 1 -1.84-.78z"
/>
<path d="m61 69a8 8 0 1 1 8-8 8 8 0 0 1 -8 8zm0-14a6 6 0 1 0 6 6 6 6 0 0 0 -6-6z" />
<path d="m79 21a8 8 0 1 1 8-8 8 8 0 0 1 -8 8zm0-14a6 6 0 1 0 6 6 6 6 0 0 0 -6-6z" />
<path d="m89 96a8 8 0 1 1 8-8 8 8 0 0 1 -8 8zm0-14a6 6 0 1 0 6 6 6 6 0 0 0 -6-6z" />
<path d="m9 72a8 8 0 1 1 8-8 8 8 0 0 1 -8 8zm0-14a6 6 0 1 0 6 6 6 6 0 0 0 -6-6z" />
<path
d="m14.5 20a5.5 5.5 0 1 1 5.5-5.5 5.51 5.51 0 0 1 -5.5 5.5zm0-9a3.5 3.5 0 1 0 3.5 3.5 3.5 3.5 0 0 0 -3.5-3.5z"
/>
<path
d="m92.5 48a5.5 5.5 0 1 1 5.5-5.5 5.51 5.51 0 0 1 -5.5 5.5zm0-9a3.5 3.5 0 1 0 3.5 3.5 3.5 3.5 0 0 0 -3.5-3.5z"
/>
<path
d="m32.5 50a5.5 5.5 0 1 1 5.5-5.5 5.51 5.51 0 0 1 -5.5 5.5zm0-9a3.5 3.5 0 1 0 3.5 3.5 3.5 3.5 0 0 0 -3.5-3.5z"
/>
<path
d="m42.5 96a5.5 5.5 0 1 1 5.5-5.5 5.51 5.51 0 0 1 -5.5 5.5zm0-9a3.5 3.5 0 1 0 3.5 3.5 3.5 3.5 0 0 0 -3.5-3.5z"
/>
</svg>
</a>
<a
class="github-icon"
title="Visit tsParticles confetti website"
href="https://confetti.js.org"
aria-label="Visit tsParticles confetti website"
target="_blank"
rel="noopener noreferrer"
>
<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.6015 2.40018C15.3817 2.18042 15.1052 2.19008 14.9536 2.2102C14.8102 2.22921 14.6385 2.27808 14.4749 2.32464L14.3489 2.36045L14.2464 2.29581C14.1079 2.20828 13.959 2.11425 13.8266 2.05669C13.6772 1.99178 13.4251 1.91791 13.1602 2.05713C12.9004 2.1937 12.8148 2.43817 12.7795 2.59373C12.7473 2.73529 12.7335 2.91231 12.7205 3.08065L12.7105 3.20815L12.7097 3.21877L12.5981 3.31062C12.4648 3.42029 12.3265 3.5341 12.2284 3.64136C12.1244 3.75498 11.9642 3.96845 12.0049 4.26569C12.047 4.57309 12.2696 4.73247 12.4087 4.80961C12.5347 4.87947 12.7004 4.94064 12.855 4.99764L12.9638 5.03785L13.004 5.14671C13.061 5.30122 13.1222 5.46702 13.1921 5.59298C13.2692 5.73208 13.4286 5.95467 13.736 5.99676C14.0332 6.03746 14.2467 5.87723 14.3603 5.7733C14.4676 5.6752 14.5814 5.53687 14.691 5.40357L14.7829 5.292L14.7935 5.29116L14.921 5.28121C15.0894 5.26813 15.2664 5.25438 15.4079 5.2222C15.5635 5.18683 15.808 5.10132 15.9445 4.84149C16.0838 4.5766 16.0099 4.32448 15.945 4.17511C15.8874 4.0427 15.7934 3.89383 15.7059 3.75527L15.6412 3.6528L15.677 3.5268C15.7236 3.36319 15.7725 3.19146 15.7915 3.04811C15.8116 2.89644 15.8213 2.61995 15.6015 2.40018ZM14.702 3.2997L14.624 3.32185L14.6034 3.32789C14.528 3.3503 14.3709 3.39699 14.2072 3.37457C14.0396 3.35162 13.9009 3.26159 13.8366 3.21989L13.8195 3.20883L13.7185 3.14512L13.7075 3.28598L13.706 3.30751C13.7007 3.3868 13.6899 3.54676 13.6136 3.69208C13.5382 3.83547 13.4139 3.93559 13.3511 3.98623L13.3338 4.00021L13.2431 4.07495L13.3205 4.10358L13.3396 4.11042C13.4113 4.13579 13.5695 4.19182 13.6897 4.31201C13.8099 4.4322 13.8659 4.5904 13.8913 4.66204L13.8981 4.68113L13.9267 4.75862L14.0015 4.66783L14.0154 4.65059C14.0661 4.58774 14.1662 4.46348 14.3096 4.38811C14.4549 4.31174 14.6149 4.30102 14.6942 4.29571L14.7157 4.29419L14.8566 4.28319L14.7928 4.1822L14.7818 4.16504C14.7401 4.10078 14.6501 3.96206 14.6271 3.7945C14.6047 3.63074 14.6514 3.47363 14.6738 3.39824L14.6798 3.37765L14.702 3.2997Z"
/>
<path
d="M10.4351 3.17016C10.6512 2.81675 10.5398 2.35512 10.1864 2.13907C9.83302 1.92302 9.37139 2.03437 9.15534 2.38778C8.63713 3.23544 8.76701 4.32775 9.46953 5.03027L9.56741 5.12815C9.76508 5.32581 9.83796 5.61619 9.75708 5.88378C9.63723 6.28027 9.86149 6.69885 10.258 6.81871C10.6545 6.93856 11.0731 6.71429 11.1929 6.3178C11.4338 5.52092 11.2167 4.65615 10.6281 4.06749L10.5302 3.96961C10.3177 3.75707 10.2784 3.42661 10.4351 3.17016Z"
/>
<path
d="M7.68629 3.94057C7.47682 3.7311 7.1372 3.7311 6.92773 3.94057C6.71826 4.15004 6.71826 4.48965 6.92773 4.69912C7.1372 4.90859 7.47682 4.90859 7.68629 4.69912C7.89575 4.48965 7.89575 4.15004 7.68629 3.94057Z"
/>
<path
d="M18.2776 5.6039C18.3588 5.19773 18.0954 4.80262 17.6892 4.72138C17.283 4.64015 16.8879 4.90356 16.8067 5.30973L16.6627 6.02967C16.5701 6.49265 16.2365 6.87052 15.7886 7.01983C14.83 7.33936 14.1161 8.14802 13.918 9.13884L13.774 9.85877C13.6928 10.2649 13.9562 10.6601 14.3623 10.7413C14.7685 10.8225 15.1636 10.5591 15.2449 10.1529L15.3889 9.43301C15.4814 8.97003 15.815 8.59216 16.2629 8.44285C17.2215 8.12332 17.9354 7.31466 18.1336 6.32384L18.2776 5.6039Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22.5236 8.84204C22.7795 9.39595 22.6068 10.0248 22.1397 10.4919C21.8688 10.7628 21.5058 10.8855 21.1825 10.943C20.8518 11.0018 20.5022 11.003 20.196 10.9833C19.8867 10.9636 19.6032 10.9213 19.3981 10.8845C19.2951 10.8659 19.2106 10.8486 19.151 10.8356L19.1047 10.8253L19.0808 10.8198L19.0611 10.8151L19.0553 10.8137L19.0534 10.8133C19.0533 10.8133 19.0523 10.813 19.1724 10.3277L19.0523 10.813C18.8723 10.7684 18.7316 10.6276 18.687 10.4476L18.6864 10.4448L18.685 10.439L18.6803 10.4193C18.6764 10.4026 18.671 10.3789 18.6645 10.3491C18.6516 10.2895 18.6342 10.205 18.6157 10.102C18.5788 9.89694 18.5366 9.61337 18.5168 9.30412C18.4972 8.99788 18.4983 8.64831 18.5571 8.31761C18.6146 7.99434 18.7373 7.63133 19.0082 7.36045C19.4753 6.89332 20.1042 6.72065 20.6581 6.97651C21.0782 7.17058 21.3515 7.56336 21.4545 8.04565C21.9367 8.14858 22.3295 8.42187 22.5236 8.84204ZM19.5961 9.90398C19.7742 9.93537 20.0095 9.96937 20.2599 9.98539C20.5232 10.0023 20.7852 9.99796 21.0074 9.95845C21.237 9.91761 21.3683 9.84908 21.4325 9.78482C21.6753 9.54207 21.6567 9.35009 21.6158 9.26137C21.5712 9.16498 21.4116 8.99855 21.0018 8.99964C20.8687 9 20.741 8.94729 20.6469 8.8532C20.5528 8.7591 20.5001 8.63138 20.5005 8.49831C20.5016 8.0885 20.3351 7.92886 20.2387 7.88434C20.15 7.84336 19.958 7.8248 19.7153 8.06756C19.651 8.13181 19.5825 8.26307 19.5417 8.4927C19.5021 8.7149 19.4979 8.97686 19.5147 9.24024C19.5307 9.49059 19.5647 9.72595 19.5961 9.90398Z"
/>
<path
d="M20.3309 13.7295C20.6263 13.4675 21.0469 13.4011 21.4086 13.5593L21.7001 13.6867C22.0796 13.8527 22.5218 13.6795 22.6878 13.3C22.8537 12.9205 22.6806 12.4783 22.3011 12.3123L22.0096 12.1849C21.1122 11.7925 20.0685 11.9573 19.3357 12.6072C19.0095 12.8964 18.5349 12.9445 18.1573 12.7265L17.9445 12.6036C17.5857 12.3965 17.127 12.5194 16.9199 12.8781C16.7128 13.2368 16.8357 13.6955 17.1945 13.9026L17.4073 14.0255C18.344 14.5663 19.5217 14.4471 20.3309 13.7295Z"
/>
<path
d="M19.0583 15.3131C19.2678 15.1037 19.6074 15.1037 19.8169 15.3131C20.0264 15.5226 20.0264 15.8622 19.8169 16.0717C19.6074 16.2812 19.2678 16.2812 19.0583 16.0717C18.8489 15.8622 18.8489 15.5226 19.0583 15.3131Z"
/>
<path
d="M12.9158 7.15689C12.7063 6.94742 12.3667 6.94742 12.1572 7.15689C11.9478 7.36636 11.9478 7.70597 12.1572 7.91544C12.3667 8.12491 12.7063 8.12491 12.9158 7.91544C13.1252 7.70597 13.1252 7.36636 12.9158 7.15689Z"
/>
<path
d="M17.1572 10.1569C17.3667 9.94742 17.7063 9.94742 17.9158 10.1569C18.1252 10.3664 18.1252 10.706 17.9158 10.9154C17.7063 11.1249 17.3667 11.1249 17.1572 10.9154C16.9478 10.706 16.9478 10.3664 17.1572 10.1569Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.63896 6.88473C10.2253 7.31945 10.8999 7.99407 11.7185 8.81276L15.1862 12.2804C16.0049 13.0991 16.6795 13.7737 17.1142 14.36C17.5633 14.9658 17.8798 15.639 17.6968 16.4143C17.5138 17.1896 16.9296 17.6502 16.257 17.9912C15.606 18.3212 14.7009 18.6229 13.6026 18.9889L8.41228 20.719C7.08241 21.1623 6.00323 21.5221 5.16641 21.671C4.322 21.8212 3.46515 21.806 2.82904 21.1699C2.19294 20.5338 2.17779 19.6769 2.328 18.8325C2.47687 17.9957 2.83663 16.9165 3.27998 15.5865L5.01002 10.3964C5.37611 9.29803 5.67776 8.39297 6.00779 7.74194C6.34875 7.06932 6.80936 6.48517 7.58466 6.30214C8.35996 6.11912 9.03319 6.43561 9.63896 6.88473ZM8.74559 8.08968C8.72811 8.07672 8.71099 8.06423 8.69422 8.05218C8.68271 8.11445 8.67047 8.18137 8.65763 8.25262C8.57264 8.72423 8.46128 9.38373 8.35599 10.1341C8.14336 11.6495 7.96353 13.4814 8.05559 14.8852C8.11132 15.7351 8.29333 16.8345 8.46708 17.7416C8.55313 18.1908 8.6356 18.585 8.69653 18.8667C8.70955 18.9269 8.72157 18.9819 8.73243 19.0312L11.3671 18.1529C11.2979 17.9474 11.2149 17.6827 11.132 17.3746C10.933 16.6348 10.7272 15.6173 10.7272 14.5552C10.7272 13.4399 10.9321 12.4226 11.133 11.6905C11.2339 11.3225 11.3352 11.0217 11.4123 10.8105C11.4302 10.7613 11.4469 10.7169 11.462 10.6775L10.7022 9.91776C9.82802 9.04358 9.2317 8.45009 8.74559 8.08968ZM6.41321 10.9303C6.62217 10.3034 6.796 9.78369 6.95433 9.35331C6.92637 9.53684 6.89826 9.72818 6.87054 9.92569C6.65541 11.4589 6.45615 13.4179 6.5588 14.9833C6.62092 15.9306 6.81799 17.1056 6.99387 18.0238C7.08263 18.4872 7.1676 18.8933 7.23043 19.1838C7.25947 19.318 7.28382 19.4278 7.30168 19.5073C6.26086 19.851 5.49409 20.0891 4.90369 20.1941C4.18292 20.3224 3.98348 20.203 3.8897 20.1092C3.79593 20.0155 3.67659 19.816 3.80481 19.0953C3.93207 18.3799 4.25474 17.4057 4.72371 15.9987L6.41321 10.9303ZM13.0687 17.5857L12.7901 17.6786C12.7292 17.498 12.6549 17.2616 12.5805 16.985C12.5266 16.7848 12.4734 16.566 12.4252 16.334C12.3123 15.7901 12.2272 15.1738 12.2272 14.5552C12.2272 13.615 12.4013 12.7369 12.5795 12.0874C12.6013 12.0078 12.6232 11.932 12.6446 11.8602L14.0812 13.2968C14.9554 14.1709 15.5489 14.7673 15.9093 15.2534C16.2631 15.7306 16.2678 15.9387 16.2369 16.0697C16.206 16.2006 16.1087 16.3846 15.5788 16.6532C15.039 16.9269 14.2415 17.1948 13.0687 17.5857Z"
/>
</svg>
</a>
</div>
</header>
<h1>tsParticles Ribbons</h1>
<div class="intro-section">
<p class="intro-lead">
Create stunning, flowing ribbon animations for your website with just a few lines of
JavaScript. tsParticles Ribbons adds beautiful, physics-driven ribbon effects that enhance
your site's visual appeal without slowing it down.
</p>
<p class="intro-sub">
Whether you're building a celebration effect, an interactive background, or a subtle ambient
animation, ribbons provide an elegant solution that works everywhere — no plugins, no flash,
just pure HTML5 Canvas.
</p>
</div>
<div class="features-section">
<h2>Why Choose tsParticles Ribbons?</h2>
<div class="features-grid">
<div class="feature-card">
<h3>Lightweight & Fast</h3>
<p>
The entire ribbons bundle weighs just a few kilobytes gzipped. Animations run at 60fps
using hardware-accelerated Canvas rendering, ensuring smooth performance even on mobile
devices.
</p>
</div>
<div class="feature-card">
<h3>Zero Dependencies</h3>
<p>
Use it with a simple script tag or install via npm. No jQuery, no React, no build tools
required — though it integrates seamlessly with all major frameworks.
</p>
</div>
<div class="feature-card">
<h3>Fully Customizable</h3>
<p>
Control colors, physics, positioning, and timing. Create anything from subtle background
effects to dramatic celebration bursts with just a few configuration options.
</p>
</div>
<div class="feature-card">
<h3>Cross-Browser Compatible</h3>
<p>
Works in all modern browsers including Chrome, Firefox, Safari, and Edge. Graceful
fallback for older browsers — your site stays functional everywhere.
</p>
</div>
<div class="feature-card">
<h3>Framework Support</h3>
<p>
Official packages available for React, Vue.js, Angular, and Svelte. One-line integration
with dedicated components that handle canvas lifecycle automatically.
</p>
</div>
<div class="feature-card">
<h3>Open Source</h3>
<p>
MIT licensed and backed by the tsParticles community. Full source code available on
GitHub with comprehensive documentation and examples.
</p>
</div>
</div>
</div>
<div class="usecases-section">
<h2>Perfect For</h2>
<ul class="usecases-list">
<li>
<strong>Product launches & announcements:</strong> Celebrate new releases with
eye-catching ribbon bursts that draw attention to your message.
</li>
<li>
<strong>Holiday & seasonal themes:</strong> Add festive ribbon animations for
holidays, sales events, or special occasions.
</li>
<li>
<strong>Interactive backgrounds:</strong> Create engaging ambient effects that respond to
user interactions without distracting from your content.
</li>
<li>
<strong>Gamification & rewards:</strong> Trigger ribbon animations when users complete
actions, earn achievements, or reach milestones.
</li>
<li>
<strong>Portfolio & creative sites:</strong> Add a unique visual element that makes
your portfolio stand out from the crowd.
</li>
<li>
<strong>E-commerce & conversions:</strong> Highlight special offers, discount reveals,
or successful purchases with celebratory effects.
</li>
</ul>
</div>
<div class="quickstart-section">
<h2>Quick Start</h2>
<p>Add ribbons to any website in under a minute. Include the script and call one function:</p>
<pre><code><script src="https://cdn.jsdelivr.net/npm/@tsparticles/ribbons@latest/tsparticles.ribbons.bundle.min.js"></script>
<script>
ribbons();
</script></code></pre>
<p>
That's it! Ribbons will fall from random positions across the top of your page. Want to
customize? Check out the interactive examples below, or read the
<a href="/blog/customization-guide.html">customization guide</a>.
</p>
</div>
<div class="share-menu-wrapper">
<details class="share-menu">
<summary class="share-menu-trigger" aria-label="Share this page">
<svg class="share-menu-trigger-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18 16a3 3 0 0 0-2.39 1.18l-6.82-3.4a3.08 3.08 0 0 0 0-1.56l6.82-3.4A3 3 0 1 0 15 7a2.96 2.96 0 0 0 .07.63l-6.86 3.43a3 3 0 1 0 0 1.88l6.86 3.43A2.96 2.96 0 0 0 15 17a3 3 0 1 0 3-1z"
fill="currentColor"
/>
</svg>
<span>Share</span>
</summary>
<div class="social-share" aria-label="Share this page">
<a
class="social-share-button"
data-share-link="facebook"
href="#"
rel="noopener noreferrer"
target="_blank"
>
<span class="social-share-button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
d="M13.5 8H16V5h-2.5C10.9 5 9 6.9 9 9.5V12H7v3h2v4h3v-4h2.3l.7-3H12V9.5c0-.8.7-1.5 1.5-1.5z"
fill="currentColor"
/>
</svg>
</span>
Facebook
</a>
<a
class="social-share-button"
data-share-link="x"
href="#"
rel="noopener noreferrer"
target="_blank"
>
<span class="social-share-button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
d="M17.6 4h2.7l-5.9 6.7L21 20h-5.2l-4.1-5.3L7 20H4.3l6.3-7.2L4 4h5.3l3.7 4.8L17.6 4zm-.9 14h1.5L8.5 5.9H6.9L16.7 18z"
fill="currentColor"
/>
</svg>
</span>
X</a
>
<a
class="social-share-button"
data-share-link="linkedin"
href="#"
rel="noopener noreferrer"
target="_blank"
>
<span class="social-share-button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
d="M6.5 8.5A1.5 1.5 0 1 1 6.5 5a1.5 1.5 0 0 1 0 3.5zM5 19V10h3v9H5zm5 0v-9h2.9v1.3h.1c.4-.8 1.4-1.6 3-1.6 3.2 0 3.8 2.1 3.8 4.8V19h-3v-3.9c0-.9 0-2.1-1.3-2.1S14 14 14 15.1V19h-4z"
fill="currentColor"
/>
</svg>
</span>
LinkedIn
</a>
<a
class="social-share-button"
data-share-link="reddit"
href="#"
rel="noopener noreferrer"
target="_blank"
>
<span class="social-share-button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
d="M18.3 10.4c-.6 0-1.1.2-1.5.6-1.1-.7-2.6-1.1-4.3-1.1s-3.2.4-4.3 1.1c-.4-.4-.9-.6-1.5-.6-1.1 0-2 .9-2 2 0 .8.5 1.5 1.2 1.8 0 .1 0 .2 0 .3 0 2.6 2.9 4.7 6.6 4.7s6.6-2.1 6.6-4.7c0-.1 0-.2 0-.3.7-.3 1.2-1 1.2-1.8 0-1.1-.9-2-2-2zm-7.8 5.1c-.5 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm4 0c-.5 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm-4 1.7c.5.4 1.2.6 2 .6s1.5-.2 2-.6c.2-.2.2-.5 0-.7-.2-.2-.5-.2-.7 0-.3.2-.8.4-1.3.4s-1-.1-1.3-.4c-.2-.2-.5-.2-.7 0-.2.2-.2.5 0 .7zM16.9 8.2c.2 0 .4.1.5.2.2.2.5.2.7 0 .2-.2.2-.5 0-.7-.2-.2-.5-.4-.8-.5l.4-2.1 1.5.3c.1.6.6 1 1.2 1 .7 0 1.3-.6 1.3-1.3S21.1 3.8 20.4 3.8c-.5 0-1 .3-1.2.8l-1.9-.4c-.3-.1-.6.1-.6.4l-.5 2.6z"
fill="currentColor"
/>
</svg>
</span>
Reddit
</a>
<a
class="social-share-button"
data-share-link="telegram"
href="#"
rel="noopener noreferrer"
target="_blank"
>
<span class="social-share-button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
d="M20.7 4.3 3.9 10.8c-1.1.4-1.1 1 .2 1.4l4.3 1.3 1.6 5c.2.6.1.8.8.8.5 0 .7-.2 1-.5l2.4-2.3 5 3.7c.9.5 1.5.2 1.7-.8l2.9-13.8c.3-1.2-.4-1.8-1.1-1.5z"
fill="currentColor"
/>
</svg>
</span>
Telegram
</a>
<a
class="social-share-button"
data-share-link="whatsapp"
href="#"
rel="noopener noreferrer"
target="_blank"
>
<span class="social-share-button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
d="M12 4a8 8 0 0 0-6.9 12l-1 4 4.1-1A8 8 0 1 0 12 4zm4.3 10.8c-.2.6-1 1.1-1.6 1.2-.4.1-.8.2-2.5-.5-2.1-.9-3.4-3-3.5-3.1-.1-.1-.8-1-.8-2s.5-1.4.7-1.6c.2-.2.5-.3.6-.3h.5c.2 0 .4 0 .6.5.2.5.7 1.6.7 1.7.1.1.1.3 0 .5-.1.2-.2.3-.3.5l-.4.4c-.1.1-.2.2-.1.4.1.2.5.9 1.2 1.5.8.7 1.5.9 1.7 1 .2.1.3 0 .4-.1l.6-.7c.2-.2.3-.2.5-.1l1.7.8c.2.1.4.2.4.3.1.1.1.7-.1 1.3z"
fill="currentColor"
/>
</svg>
</span>
WhatsApp
</a>
<a class="social-share-button" data-share-link="email" href="#" rel="noopener noreferrer">
<span class="social-share-button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M4 6h16v12H4z" fill="none" stroke="currentColor" stroke-width="2" />
<path d="m4 7 8 6 8-6" fill="none" stroke="currentColor" stroke-width="2" />
</svg>
</span>
Email</a
>
<button id="shareCopyLinkButton" class="social-share-button" type="button">
<span class="social-share-button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M8 8h10v10H8z" fill="none" stroke="currentColor" stroke-width="2" />
<path
d="M6 16H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"
fill="none"
stroke="currentColor"
stroke-width="2"
/>
</svg>
</span>
Copy link
</button>
</div>
</details>
</div>
<div id="ribbons-modes"></div>
<footer>
<a href="https://github.com/tsparticles">
<span class="icon">
<svg class="icon"><use xlink:href="#code"></use></svg>
</span>
<span> with </span>
<span class="icon">
<svg class="icon"><use xlink:href="#heart"></use></svg>
</span>
<span> by <b>tsParticles</b></span>
</a>
<div class="footer-links">
<a href="/about.html" class="cookie-policy-link">About</a>
<a href="/blog/index.html" class="cookie-policy-link">Blog</a>
<a href="/cookie-policy.html" class="cookie-policy-link">Cookie Policy</a>
<a href="/privacy-policy.html" class="cookie-policy-link">Privacy Policy</a>
</div>
<button id="cookiePreferencesButton" class="cookie-preferences-button" type="button">
Cookie preferences
</button>
</footer>
</body>
</html>