Staaarter

Square GIF Creator

Generates a simple, always-square animated GIF: a two-color checkerboard pattern that marches diagonally frame to frame, rendered on a canvas whose width and height are always identical, since there's a single `size` setting rather than independent width/height. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-29
By Staaarter Team
gifgenerator

Overview

Introduction

Some use cases genuinely need a square image, an avatar, an app icon, a tile in a grid layout, and it's easy to accidentally end up with a non-square GIF by feeding a general-purpose generator mismatched width/height values.

This tool sidesteps that entirely: it only exposes one size setting, used for both dimensions, so the output is provably square by construction, not by coincidence.

What Is Square GIF Creator?

A generator that produces a simple two-color checkerboard animation on a canvas whose width and height are always identical.

The checkerboard's squares shift diagonally by a small offset each frame, producing a marching, tileable-looking motion.

How Square GIF Creator Works

Each pixel's checkerboard cell is computed from its (x, y) position divided by the configured check size, offset by a small per-frame shift, and colored with whichever of the two configured colors that cell parity selects.

Because both canvas dimensions are driven by the single `size` input rather than separate width/height parameters, there is no code path in this tool that can produce a non-square frame.

When To Use Square GIF Creator

Use it whenever you specifically need a guaranteed-square animated GIF, an app icon placeholder, an avatar background, or a grid tile.

It's also a simple, clean test fixture for tools that expect (or need to validate) square input.

Features

Advantages

  • Square output is structurally guaranteed, not just a matter of entering matching width/height values.
  • Simple, clearly tileable checkerboard pattern with configurable colors and check size.
  • Small, predictable file size thanks to the simple repeating pattern.

Limitations

  • Only produces the checkerboard pattern; it doesn't support masking, custom shapes, or uploaded content.
  • There's no independent width/height control, by design, since the whole point is guaranteed square output.

Examples

Generating a 120px marching checkerboard

Input

size: 120, checkSize: 15, colorA: #111827, colorB: #f9fafb

Output

A 120x120 animated GIF of a dark/light checkerboard whose squares appear to march diagonally as it loops.

Each frame offsets the checkerboard's cell boundaries slightly, and the two configured colors alternate based on each cell's parity.

Best Practices & Notes

Best Practices

  • Choose a checkSize that divides evenly into your chosen size for the cleanest-looking, most regular checkerboard.
  • Use higher-contrast colors if you want the marching motion to read clearly at a glance.
  • Use Round GIF Creator instead if you need a circular, transparency-masked shape rather than a plain square.

Developer Notes

The tool's options type only exposes a single `size` field (not separate width/height), which is a deliberate API-level guarantee, not just a documented convention, that this generator's output can never be non-square.

Square GIF Creator Use Cases

  • Generating a placeholder app icon or avatar background that must be perfectly square
  • Creating a simple animated checkerboard tile for a grid-based layout
  • Producing a square test fixture for validating tools that expect square GIF input

Common Mistakes

  • Looking for separate width/height options; this tool intentionally only exposes one `size` value to guarantee square output.
  • Expecting a custom uploaded image to be squared/cropped, this tool generates its own checkerboard pattern rather than processing an upload.

Tips

  • If you need a non-checkerboard pattern that's still guaranteed square, try adjusting checkSize to something very large or very small for a different visual effect from the same underlying pattern.
  • Pair with GIF Fade-In/Fade-Out Effect Adder afterward if you want a fade treatment on top of this animation.

References

Frequently Asked Questions