🎨 Blobs: Dead or Alive?
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 Secret Sauce: Generative Anatomy
The most impressive part of Alfredo Salzillo's project is the Generative Blob Engine. Every blob is rendered on the fly using SVGs.
1. The Geometry
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.
2. The Traits
The generator assigns specific traits to each instance:
- Eyes: Varies between single (cyclops) and double.
- Color Palette: Randomized "cute" pastels.
- Animations: Blobs use CSS transitions to "look around" or shake when clicked.
🛠️ The Tech Stack
The project leverages a modern web stack to ensure performance:
- 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.
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.
🎮 Play it Yourself!
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:
- GitHub Repository: alfredosalzillo/blobs-dead-or-alive
- Live Demo: Play on the Web
alfredosalzillo
/
blobs-dead-or-alive
A Blobs game.
Blobs Dead or Alive
A fast-paced "Find the Blob" game built with React, Next.js, and generative art.
🎮 How to Play
Try it on the Web.
The goal is simple: find the "Wanted" blob among a crowd of similar-looking blobs before time runs out!
✨ Features
- 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).
🛠️ Tech Stack
- Framework: Next.js 15+ (App Router)
- Library: React 19
- Styling: SASS
- Linter/Formatter: Biome
-
PWA:
@ducanh2912/next-pwa - Backend/Analytics: Firebase
🚀 Getting Started
Prerequisites
- Node.js 18+
- npm or yarn
Installation
-
Clone the repository:
git clone https://github.com/alfredosalzillo/blobs-dead-or-alive.git cd blobs-dead-or-alive -
Install dependencies:
…
What's Next?
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!
Top comments (0)