What is a Mobius transformation?

It's a conformal (angle-preserving) map of the complex plane of the form f(z) = (z - a) / (1 - conj(a) * z); this tool uses the specific family where |a| < 1, which maps the unit disk onto itself, so the distortion stays contained within the image's inscribed circle.

What do the ax and ay controls mean?

Together they form a single complex control point a = ax + ay*i (the real and imaginary parts). Its distance from the origin, sqrt(ax^2 + ay^2), must stay below about 0.99 for the transform to remain well-defined.

Why does the tool require ax^2 + ay^2 < 0.98?

As the control point's magnitude approaches 1, the transform becomes numerically unstable near the edge of the disk, so the tool enforces a safety margin below the mathematical limit of 1 to keep results well-behaved.

Why does this map stay contained to a circle instead of affecting the whole image?

The transform treats the image's inscribed circle as the unit disk it operates on; pixels outside that circle are copied through unchanged, since the Mobius map is only defined relative to the disk.

PNG Mobius Transform Applier - Apply a Conformal Disk Map Online

Q: What do the ax and ay controls mean?

Together they form a single complex control point a = ax + ay*i (the real and imaginary parts). Its distance from the origin, sqrt(ax^2 + ay^2), must stay below about 0.99 for the transform to remain well-defined.

Q: Why does the tool require ax^2 + ay^2 < 0.98?

As the control point's magnitude approaches 1, the transform becomes numerically unstable near the edge of the disk, so the tool enforces a safety margin below the mathematical limit of 1 to keep results well-behaved.

Q: Why does this map stay contained to a circle instead of affecting the whole image?

The transform treats the image's inscribed circle as the unit disk it operates on; pixels outside that circle are copied through unchanged, since the Mobius map is only defined relative to the disk.

Overview

Introduction

This tool applies a Mobius transformation, a classic conformal map from complex analysis, to a PNG's inscribed circle, entirely in your browser.

It's a mathematically rich way to produce swirling, lens-like distortions that stay perfectly contained within a circular region.

What Is PNG Mobius Transform Applier?

A client-side effect that treats the image's inscribed circle as the complex unit disk and warps it using a disk-automorphism Mobius transformation, controlled by a single complex parameter a = ax + ay*i.

Because this family of Mobius maps sends the unit disk to itself, the warp never spills outside the circle, and its inverse has the same closed-form shape (with a negated), which is what makes efficient inverse-sampling possible.

How PNG Mobius Transform Applier Works

For every output pixel inside the inscribed circle, the tool normalizes its position to disk coordinates w, applies the inverse map z = (w + a) / (1 + conj(a) * w) using complex-number arithmetic, and converts the resulting z back to pixel coordinates to sample the source image.

Pixels whose normalized position falls outside the unit disk are copied through unchanged, since the transform is only defined within it.

When To Use PNG Mobius Transform Applier

Use it to create abstract, swirl-like distortions of a photo or texture for artistic or generative-art purposes.

It's also a fun way to explore how conformal maps from complex analysis visually transform an image.

Often used alongside PNG Spherical Effect Adder, PNG Kaleidoscope Effect Adder and PNG Rotator.

Features

Advantages

Runs entirely client-side; the uploaded image never leaves your device.
The transform is angle-preserving (conformal), so small shapes retain their local form even as they're globally warped.
The disk-automorphism property guarantees the distortion never spills outside the inscribed circle.

Limitations

Only works within the image's inscribed circle; content outside it is unaffected.
Nearest-neighbor sampling means strong control-point values near the 0.98 magnitude limit can show pixelation or stretching artifacts near the disk's edge.

Examples

Gentle off-center warp

Input

A 500x500 PNG, ax = 0.3, ay = 0.1

Output

A 500x500 PNG with the circular region subtly swirled and shifted toward one side

A small-magnitude control point produces a mild, smooth conformal distortion.

Strong swirl near the disk boundary

Input

A 500x500 PNG, ax = 0.6, ay = -0.6

Output

A 500x500 PNG with a dramatic, stretched warp concentrated toward one edge of the circle

A control point with a larger magnitude (closer to the 0.98 limit) produces a much more pronounced, unevenly stretched distortion.

Best Practices & Notes

Best Practices

Keep ax and ay well under the 0.9 range for smooth, predictable results before pushing toward the mathematical limit.
Experiment with the sign of ax and ay together, since they jointly determine the direction the warp is centered toward.

Developer Notes

The lib function operates on a plain Uint8ClampedArray PixelBuffer with no DOM dependency: it validates ax^2 + ay^2 < 0.98, then for each pixel inside the inscribed unit disk computes the inverse Mobius map z = (w + a) / (1 + conj(a) * w) via explicit complex-number arithmetic (numerator/denominator real and imaginary parts) before inverse-sampling the source image at z.

PNG Mobius Transform Applier Use Cases

Creating swirling, conformal-map art from a photo
Exploring complex-analysis transformations visually
Producing an abstract, lens-warped variant of a logo or texture

Common Mistakes

Setting ax and ay both close to their limits, which can trigger the 'must be less than ~0.99' validation error since it's their combined magnitude that matters, not each value individually.
Expecting the warp to affect the whole rectangular image — it's confined to the inscribed circle.

Tips

Try ax = ay = 0 first to confirm the identity case (no visible change), then increase one axis at a time to see its individual effect.
Combine with the spherical effect tool for a two-stage distortion pipeline.

PNG Mobius Transform Applier