Tools: Building a Generative Art Game with React: Blobs - Dead or Alive

🎨 Blobs: Dead or Alive? ## 🧬 The Secret Sauce: Generative Anatomy ## 1. The Geometry ## 2. The Traits ## 🛠️ The Tech Stack ## 🎮 Play it Yourself! ## alfredosalzillo / blobs-dead-or-alive ## A Blobs game made using React. ## Blobs Dead or Alive ## 🎮 How to Play ## ✨ Features ## 🛠️ Tech Stack ## 🚀 Getting Started ## Prerequisites ## Installation ## What's Next? Have you ever looked at a random SVG shape and thought, "That looks like it has a personality"? That’s exactly how Blobs - Dead or Alive was born. What started as a generative art experiment turned into a fully functional skill game where you hunt for specific, procedurally generated "blobs" before the timer runs out. In this post, we’ll look at the technical "DNA" of these blobs and how React powers the game engine. The most impressive part of Alfredo Salzillo's project is the Generative Blob Engine. Every blob is rendered on the fly using SVGs. A blob isn't just a circle; it’s a set of random points connected via splines. By calculating points around a center and adding a "randomness factor" to their distance from the origin, we get that organic, wobbly shape. The generator assigns specific traits to each instance: The project leverages a modern web stack to ensure performance: Technical Insight: Managing dozens of unique, animated SVGs in React can be taxing. This project handles it efficiently by isolating the "Blob" component and using optimized state updates to prevent unnecessary re-renders of the entire grid. The project is fully open-source. Whether you want to learn how to handle SVG manipulation in React or just want to challenge your eyes, check it out: A fast-paced "Find the Blob" game built with React, Next.js, and generative art. Try it on the Web or get it on the Google Play Store. The goal is simple: find the "Wanted" blob among a crowd of similar-looking blobs before time runs out! Building characters out of math is a great way to learn SVG paths and React animation. What would you add to these blobs? Hats? Mustaches? Let me know in the comments! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse - Eyes: Varies between single (cyclops) and double. - Color Palette: Randomized "cute" pastels. - Animations: Blobs use CSS transitions to "look around" or shake when clicked. - React & TypeScript: For predictable UI state and type safety. - SCSS: To handle the complex animations and transitions. - Capacitor: The repository includes configurations for Android, allowing the game to live on the Google Play Store. - GitHub Repository: alfredosalzillo/blobs-dead-or-alive - Live Demo: Play on the Web - Generative Art: Every blob is uniquely generated with different shapes, colors, and features. - Rush Mode: Test your speed in an endless survival mode. - Campaign Mode: Progress through increasingly difficult stages (Coming Soon). - Progressive Web App (PWA): Install it on your device for an app-like experience. - Cross-Platform: Available on Web and Android (via TWA). - Framework: Next.js 15+ (App Router) - Library: React 19 - Styling: SASS - Linter/Formatter: Biome - PWA: @ducanh2912/next-pwa - Backend/Analytics: Firebase - Node.js 18+ - npm or yarn