Blobs.app: Client-Side SVG Generation for Organic Shapes in Web and Flutter

Hook

Every blob shape you've ever seen on a modern landing page—those smooth, organic backgrounds that cost $50 on design marketplaces—can be generated with a dozen lines of JavaScript and some clever Bézier curve math.

Context

The rise of organic, fluid design in 2018-2020 created a problem for developers: traditional geometric shapes like circles and rectangles felt sterile, but hand-drawing organic shapes in design tools was time-consuming and resulted in static assets that couldn't be programmatically varied. Designers would spend hours tweaking anchor points in Illustrator to create the perfect "friendly" blob, only to have stakeholders request "just a slightly different shape" days later.

Blobs.app solves this through parametric generation—defining organic shapes not as fixed paths but as algorithms with adjustable parameters. Need a different blob? Tweak a slider and regenerate. Need 50 blobs for a background pattern? Click 50 times. The tool runs entirely client-side, meaning there's no server processing, no API limits, and no privacy concerns about design assets being uploaded. For developers working on component libraries or design systems, this approach means blob shapes can be treated as configuration rather than assets, living in code rather than Figma files.

Technical Insight

Blobs.app generates organic shapes using closed SVG paths constructed from Bézier curves with randomized control points. The core algorithm places anchor points around a circle, then displaces each point radially by a random amount within configured bounds. The key insight is using cubic Bézier curves between anchors with automatically calculated control points that maintain smoothness (C1 continuity at minimum) across the entire path.

The generated SVG follows a predictable structure. Here's a typical output:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#8B5CF6" d="M43.2,108.9 C32.5,93.7 35.8,71.4 50.1,59.2 C64.4,47.0 85.2,45.3 101.8,52.1 C118.4,58.9 130.7,73.2 136.8,90.5 C142.9,107.8 142.8,127.1 133.7,141.8 C124.6,156.5 107.5,166.6 89.3,167.2 C71.1,167.8 52.8,159.0 43.2,144.2 C33.6,129.4 33.5,108.9 43.2,108.9 Z"/>
</svg>

What makes this approach powerful is the path's d attribute—a string of commands (M for move, C for cubic curve) that can be generated programmatically. The application calculates these paths in real-time as users adjust parameters like complexity (number of anchor points), contrast (how far points deviate from circular), and growth (overall size variation).

The Flutter export demonstrates thoughtful cross-platform consideration. Instead of just dumping SVG code, blobs.app converts paths to Flutter's CustomPainter format:

class BlobPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Color(0xFF8B5CF6)
      ..style = PaintingStyle.fill;
    
    var path = Path();
    path.moveTo(43.2, 108.9);
    path.cubicTo(32.5, 93.7, 35.8, 71.4, 50.1, 59.2);
    path.cubicTo(64.4, 47.0, 85.2, 45.3, 101.8, 52.1);
    // ... additional curve commands
    path.close();
    
    canvas.drawPath(path, paint);
  }
  
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

This conversion handles coordinate system differences and API syntax, saving mobile developers from manual translation work. It's a small feature that reveals understanding of actual developer workflows—people using this tool aren't just exporting to one platform.

The randomization engine deserves attention. Rather than pure random number generation (which can produce inconsistent results), the tool likely uses seeded randomness or constrained algorithms that ensure blobs remain visually pleasing. You never get a blob that collapses into a line or explodes into chaos, suggesting boundary conditions and validation in the generation logic. The shareable URLs encode these random seeds, allowing deterministic regeneration—critical for version control and collaboration.

The PWA implementation means the entire application, including the generation algorithms, gets cached locally. After the first visit, the tool loads instantly and works offline. This architectural choice prioritizes user experience over tracking analytics or server-side features, a refreshing trade-off in an era of bloated web applications. For enterprise developers behind corporate firewalls or working in secure environments, this offline capability isn't just convenient—it's often a requirement.

Gotcha

The primary limitation is single-shape generation. If you need to create a composition of multiple blobs or layer them with specific relationships, you're generating and positioning each blob manually. There's no artboard concept, no grouping, no z-index management. This makes blobs.app excellent for generating individual assets but less useful for complete illustrations or complex background patterns that require multiple coordinated shapes.

The export formats are limited to code (SVG and Flutter). Designers who need rasterized images at specific resolutions must copy the SVG and paste it into another tool for export to PNG or JPEG. Similarly, there's no animation export despite SVG's animation capabilities—if you want your blob to morph or pulse, you're writing that animation code yourself. The tool also lacks an API or CLI, meaning automation workflows require browser automation tools like Puppeteer rather than simple HTTP requests. For teams wanting to generate blob variations in CI/CD pipelines or as part of build processes, this creates unnecessary complexity.

Verdict

Use if: You need quick organic shapes for web or mobile UI, value zero-setup browser-based tools, want to maintain blob configurations in version control through shareable URLs, or need Flutter-specific export formats without manual conversion. It's perfect for developers building component libraries where blob shapes should be reproducible and tweakable rather than static design artifacts. Skip if: You need batch generation of multiple blobs, require rasterized exports at production resolutions, want animated blob shapes, need API access for programmatic generation, or need shapes beyond organic blobs (waves, abstract patterns, geometric forms). Also skip if you need tight integration with design tools like Figma where your entire workflow already lives—copying and pasting SVG code breaks the design-to-development handoff that modern design systems depend on.