xiry.

Design · Web app

SVG Pattern Builder

Online generator for customizable static and animated SVG geometric background patterns.

From the Xiry library · Updated 3 October 2026

Visit svg.designcode.io ↗

A browser-based generator created by DesignCode for crafting complex geometric patterns and backgrounds. It provides fine-grained controls over shape size, spacing, rotation, colors, and animation parameters. Designers and developers can export the results directly as raw SVG code or download them as PNG, GIF, or video files.

What it's for

  • Generate animated or static background patterns for websites and apps
  • Export lightweight SVG code for use in Framer, Webflow, or custom codebases
  • Create looping motion graphics and GIF assets for design presentations or videos

Features

  • Configurable aspect ratios including 16:9, 1:1, 9:16, 4:3, and 3:4
  • Precision controls for spacing, angular rotation, offset, and size gradients
  • Randomization toggles for position and opacity
  • Animation settings for rotation, opacity, scale, translation, and blur
  • Code preview with instant copy for raw SVG
  • Multi-format export options supporting SVG, PNG, Video, and GIF

Pricing

Free to use; Google sign-in required to save designs and export assets.

Details

Type
Web app
Category
Design
Topic
SVG & Vector Tools
Open source
No
Platforms
Web
For
Web designers, UI/UX designers, and front-end developers.
Alternative to
Haikei, Hero Patterns, fffuel
Tags
svg, pattern generator, backgrounds, web design, vector graphics, animation

Why it was saved

  • @kalypsodesigns, 27 February 2025: Allows rapid creation of animated and complex geometric SVG backgrounds with code export and video/GIF/PNG downloads.
  • @MengTo, 23 July 2024: Generates decorative SVG pattern animations with presets and code export — useful for design assets and backgrounds.

Related

  • Lottielab

    Browser-based motion design editor for creating and exporting Lottie animations

  • Iconhub

    Customizable free icon collection across multiple styles and categories

  • Rolling Text Animation

    A remixable Framer component showing a sliced rolling text page-load animation.

  • svg-grabber

    Preview, copy, and download SVG icons and illustrations from any website.

  • SVGs.app

    Generate customizable vector SVG illustrations from text prompts using AI

  • Hera

    AI-powered web editor for generating editable motion graphics from text prompts.

Updated