DEV Community

Cover image for "Insect Particlizer" an Experiment of combining Pixel Manipulation with CSS.
Ali Shata
Ali Shata

Posted on

"Insect Particlizer" an Experiment of combining Pixel Manipulation with CSS.

Canvas..what a beautiful name that doesn't express how much I love this API, although it was terrible for me at the beginning, but after some trial and error, I understood it, even tried to create uncommon stuff with that crashed my IDE several times. This experiment here is just a one of an uncountable number of experiments that I'm doing quite often in my Frontend journey, here I used Canvas API to get the data of the insect's image, then handled this data in one CSS property (yeah one!)to produce this particles effect.

Insect Particlizer

Question here is, how this could be possible..how one CSS property could handle the image's data (an array of 100000 arrays btw)?

  • I 'really encourage you my reader to discuss with me in the comments, even try to brainstorm some ideas, maybe you can come up with a better answer than mine.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay