Welcome to tsParticles Show & Tell!

[matteobruni]

Hi everyone!

Let's open a discussion to show your amazing creations made with tsParticles or any dependent library (react-tsparticles, particles.vue, particles.vue3, ng-particles, etc.)

You can find some templates ready to use here

[ohmygaugh-crypto]

I hope y'all are all enjoying this repo as much as I am! Here is a sample "polygon mask" I created a while back:
[https://codepen.io/ohmygaugh-crypto/pen/vYXxNEv].

Overall, The biggest hurdle I faced was getting a url accessible svg image into a singular shape. (I could not make the code happy working with more than one shape for my logo). To do that I just used a variety of free svg conversion websites with my until everything could be slapped together. I think this unpolished version could help out those of you who are stuck attempting a similar project. More updates on my latest iterations yet to come!

[ohmygaugh-crypto]

Here is what tsParticles can look like as an "intriguing" website: https://validide.netlify.app/.

[pz-max]

Just finished our "polygon mask" example on our bootstrap website: https://pypsa-meets-earth.github.io/. Feel free to check out our website repo for inspiration on how we implemented it (relevant files index.html, style.css, custom_particle.js)
Some challenges we had as 'beginners':

• centre the canvas/image in a container
• get the svg file right
• make everything responsive

A lot of trial and error with particle.js but @matteobruni helped us with some excellent advice:1st_place_medal:

[matteobruni]

Really nice result!!

[sluxzer]

awesome, I really love the results 👍

btw, I don't notice it on the first load, due to the heavy load (the particle doesn't show up for some seconds, I need to reload to see it)

i wonder what causes it

[pz-max]

Hi @sluxzer , I updated the above links since we rebranded from "Africa" to "Earth".
Not sure what it causes but probably some profiling would tell the issues