What does 'wavy edge' mean here?

Instead of a plain rectangular canvas, the shape's outer boundary is a radius that oscillates up and down as you go around the circle, producing a scalloped, wave-like border rather than straight edges.

Is the outside of the wave shape transparent?

Yes, every pixel outside the wavy outline is fully transparent, so the GIF reads as a scalloped cutout rather than a wave pattern drawn on a rectangle.

What animates from frame to frame?

The scallop pattern's phase rotates a small amount every frame, so the waves appear to gently ripple or rotate around the border rather than sitting perfectly still.

Can I control how many scallops there are?

Yes, the wave count option sets how many scallops run around the full border, from a gentle few-lobed flower shape to a busier, tightly-scalloped edge.

Wavy Edge GIF Creator - Scalloped Border Animated GIF

Overview

Introduction

Rectangular GIFs are the default, but a shaped, wavy-bordered graphic can look much more distinctive as a badge, sticker, or decorative element.

The Wavy Edge GIF Creator generates an animated GIF masked into a scalloped, wave-like border, with the waves gently rippling around the edge as the animation plays.

What Is Wavy Edge GIF Creator?

This is a from-scratch generator: every frame is built directly from a mathematical radius function, not from an uploaded image.

The shape's boundary is defined in polar coordinates as a base radius modulated by a sine wave, which is the same underlying idea used to draw gear-like or flower-like blob shapes.

How Wavy Edge GIF Creator Works

For each pixel, the tool computes its distance and angle from the canvas center, then compares that distance to the wavy boundary radius at that angle: `baseRadius + amplitude * sin(waveCount * angle + phase)`.

Pixels inside that radius are filled with your chosen color; pixels outside stay transparent. The `phase` term increases a little every frame, so the whole scalloped pattern appears to rotate/ripple around the shape as the GIF plays.

When To Use Wavy Edge GIF Creator

Use it to create a decorative, non-rectangular animated badge, sticker, or background accent shape.

It's also a good starting point for a wavy loading indicator or a playful animated frame element.

Often used alongside Star-Shaped GIF Creator, Colorful GIF Creator and Custom GIF Creator.

Features

Advantages

Produces a genuinely transparent, non-rectangular shape rather than a wave pattern drawn on a solid rectangle.
Fully parametric: canvas size, wave count, frame count, and delay are all adjustable.
The rippling animation is smooth and continuous, since the phase shift wraps cleanly back to its starting angle after a full loop.

Limitations

The shape is always a radially-symmetric blob; it can't produce independently-shaped edges per side like a rectangle with only its top edge scalloped.
Very high wave counts on a small canvas can produce scallops too fine to render clearly at low resolution.

Examples

Generating a gently rippling scalloped badge

Input

size: 100, waveCount: 10, frameCount: 20, delayCs: 5, fillColor: #3498db

Output

A 100x100 animated GIF of a blue scalloped-edge blob whose 10 waves slowly rotate around the border.

The phase term completes one full 2*pi rotation across the 20 frames, so the animation loops seamlessly back to its starting appearance.

Best Practices & Notes

Best Practices

Choose a wave count between 6 and 14 for a clearly readable scalloped edge at typical badge sizes.
Use a higher frame count for a smoother-looking ripple, since the phase shift per frame becomes smaller and less abrupt.
Pick a fill color with good contrast against the background you plan to place the GIF on, since the surrounding area is fully transparent.

Developer Notes

The mask test compares each pixel's polar distance/angle from center against `baseRadius + amplitude * sin(waveCount * angle + phase)`, recomputed per frame rather than rotating a pre-rasterized bitmap, avoiding resampling artifacts at the scallop tips exactly like the Star-Shaped GIF Creator's per-frame polygon test.

Wavy Edge GIF Creator Use Cases

Creating a decorative animated badge or sticker with a distinctive non-rectangular border
Building a playful animated background accent shape for a webpage or presentation
Demonstrating polar-coordinate shape masking as a teaching or reference example

Common Mistakes

Expecting the wave pattern to only affect one edge; the whole border ripples uniformly around the shape.
Setting the wave count very high on a small canvas, which can make individual scallops blur together at low resolution.

Tips

Start with the default wave count and adjust up or down while watching the live preview to find the look you want.
Pair with Star-Shaped GIF Creator if you want a sharply-pointed polygon mask instead of a smooth scalloped blob.

Wavy Edge GIF Creator