# SVG Pattern Builder

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

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.

Website: https://svg.designcode.io/

## What it is 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](https://xiry.app/topics/design.md)
- 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](https://www.instagram.com/p/DGkiVKcT0ju/): Allows rapid creation of animated and complex geometric SVG backgrounds with code export and video/GIF/PNG downloads.
- [@MengTo, 23 July 2024](https://x.com/MengTo/status/1815748175317098776): Generates decorative SVG pattern animations with presets and code export — useful for design assets and backgrounds.

## Related

- [Lottielab](https://xiry.app/resources/lottielab): Browser-based motion design editor for creating and exporting Lottie animations (Web app, Freemium)
- [Iconhub](https://xiry.app/resources/iconhub): Customizable free icon collection across multiple styles and categories (Website, Free)
- [Rolling Text Animation](https://xiry.app/resources/rolling-text-animation): A remixable Framer component showing a sliced rolling text page-load animation. (Web app, Free)
- [svg-grabber](https://xiry.app/resources/svg-grabber): Preview, copy, and download SVG icons and illustrations from any website. (Browser extension, Free)
- [SVGs.app](https://xiry.app/resources/svgs-app): Generate customizable vector SVG illustrations from text prompts using AI (Web app, Freemium)
- [Hera](https://xiry.app/resources/hera): AI-powered web editor for generating editable motion graphics from text prompts. (Web app, Freemium)

Updated 3 October 2026. Page: https://xiry.app/resources/svg-pattern-builder

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.