Overview
Introduction
Sometimes you don't need a whole rectangular region of an animated GIF, just a small fragment, like a profile-picture-style circular cutout of an animated face or icon. This tool extracts exactly that.
It decodes each frame, cuts out a small centered square (optionally masked to a circle), and re-encodes a new, smaller animated GIF from the fragments.
What Is GIF Fragment Cutter?
A client-side tool that extracts a small, square fragment centered at a chosen (centerX, centerY) point from every frame of an animated GIF, with an optional circular mask that makes every pixel outside the inscribed circle fully transparent.
It's meaningfully different from gif-cropper/gif-slicer (both of which extract an arbitrary rectangle by its top-left corner): this tool is framed around a small centered square and adds a circle-shape option those tools don't have.
How GIF Fragment Cutter Works
Given a center point and a size, the tool computes the fragment's top-left corner (center minus half the size) and validates that the resulting square lies within the source frame's bounds.
It then copies that square region out of every decoded frame. If the circle shape is selected, it additionally computes each output pixel's distance from the fragment's own center and sets alpha to 0 for any pixel farther than the fragment's radius, producing a circular cutout with transparent corners.
When To Use GIF Fragment Cutter
Use it to cut a small, circular avatar-style fragment out of an animated GIF, like an animated face or icon for a circular profile picture.
It's also useful for extracting a small centered detail from a larger animated scene without needing to calculate an arbitrary top-left-anchored rectangle.
Often used alongside GIF Cropper, GIF Slicer and GIF Zoomer.
Features
Advantages
- Offers a circular mask option that neither gif-cropper nor gif-slicer provides, useful for avatar-style circular cutouts.
- Centered framing (rather than top-left-anchored) is often more intuitive for small fragments than computing a rectangle's corner.
- Runs entirely client-side; nothing you upload leaves your browser.
Limitations
- Only produces square (or circle-in-square) fragments; for a non-square rectangle, use gif-cropper or gif-slicer instead.
- The circular mask fully removes corner pixels (sets them transparent) rather than blending or anti-aliasing the circle's edge, so the boundary can look slightly hard-edged rather than smooth.
Examples
Best Practices & Notes
Best Practices
- For avatar or profile-picture-style cutouts, the circle shape option usually looks better than a plain square.
- Make sure your subject stays centered across all frames before cutting, since the fragment's position is fixed for the whole animation.
- If you need a non-square rectangle instead, use gif-cropper or gif-slicer rather than trying to approximate it here.
Developer Notes
cutGifFragment in gif-fragment-cutter.ts is a deliberately independent implementation, not a wrapper around cropGif, since its centered-square framing and optional circular alpha mask are genuinely different coordinate math from gif-cropper's top-left-anchored rectangle, per this batch's guidance to only share code between near-duplicate tools when they're truly identical operations. It's applied per decoded GIF frame via transformGifFrames.
GIF Fragment Cutter Use Cases
- Cutting a circular, avatar-style fragment from an animated GIF for a profile picture
- Extracting a small centered detail from a larger animated scene
- Producing a compact, focused fragment of an animation for a smaller display context
Common Mistakes
- Expecting a non-square rectangle output; this tool only produces square (or circle-in-square) fragments.
- Choosing a fragment size or center that doesn't fit inside the source GIF's bounds, which the tool rejects rather than clipping automatically.
Tips
- If your subject isn't centered, recenter it first with gif-shifter before cutting a fragment.
- For a rectangular (non-square) region instead, gif-cropper or gif-slicer is the right tool.