Animated Pattern Generator
Design animated light patterns in your browser: bend the lines, set your colors and export seamless loops as MP4, WebM, GIF, PNG or live code. Free.
Start from a look
Shape the lines
PNG or SVG with a transparent background works best. The file stays on your device.
Drag the four nodes on the picture to bend the lines.
Drag the picture to move the center of the pattern.
Pick the colors
Line colorsSet the motion
Finish the look
Print effectExport
Exports the frame shown on the picture. Move the time slider to pick another one.
This browser cannot encode video. Use the latest Chrome, Edge, Firefox or Safari, or export a GIF.
GIF is limited to 256 colors. For smooth gradients and small files, export a video.
Paste this code in any web page to run the pattern live. It needs no library, stays sharp at any size, and stops when it is off screen.
Text and logo patterns cannot run as code yet. Export them as a video or an image.
This format has no transparency: the background color is used.
This tool needs WebGL 2, which this browser or device has turned off. Turn on hardware acceleration in your browser settings, or try another browser.
Made on your device, nothing is uploaded.
Saved designs
0About Animated Pattern Generator
Animated Pattern Generator is a free studio for moving light patterns. Lines of color are drawn live by your graphics card, so every change shows instantly: fans, tunnels, spirals, flowers, contour maps, a spinning globe, a circuit chip and more. Start from a finished look, then shape the lines, the colors and the motion until the pattern fits your brand.
You can bend the lines by hand, run them around the outline of any word or logo, take your palette from an image or paste your brand colors. Every animation is built from whole cycles, so the last frame leads straight back into the first and the loop never jumps.
Export a video in MP4 or WebM up to 4K, a GIF, or a still image in PNG, JPG or WebP up to 8K, with a transparent background when the format allows it. You can also copy live code that runs the pattern on any website with no library. Everything happens on your device: nothing is uploaded.
How to use Animated Pattern Generator
- Pick a look to start from, or press Surprise me for a new design.
- Choose a pattern and adjust its lines. Drag the picture to move its center, or type a word to run the lines around it.
- Pick a palette, paste your hex codes, or take the colors from an image.
- Set the motion, the loop length and the speed, then finish the look with glow, a 3D tube, fluted glass or film grain.
- Choose the frame shape: 16:9, square, portrait, story, banner or a custom size.
- Export a video, a GIF or an image, or copy the code to run it live on your website.