Mesh Gradient Avatar Generator

Generate Abstract Avatars from a Seed

The Mesh Gradient Avatar Generator creates abstract profile images from a piece of text called a seed. Each seed produces its own arrangement of colours, and the same seed with the same settings always produces the same avatar. On top of the background you can add up to 24 characters of centred text, such as initials, and an optional overlay of small squares or circles called the pixel pattern. Results come back as SVG, and you can download them as SVG or PNG, or copy the SVG code or a ready-to-use data URI.

Typical uses include default profile pictures for new user accounts, placeholder images in design mock-ups, team or project icons, chat bot avatars, and decorative thumbnails for blog posts or playlists.

How the Generator Works

When you click Generate Avatar, the page sends your settings to a Newisty API endpoint. On the server, the open-source PHP library Radiance builds the avatar as an SVG image and returns it, together with a base64 data URI of the same SVG, to your browser. The controller generates the image and returns it in the response; it does not save it. Only your settings are sent, not any file, because there is nothing to upload.

The PNG download is created afterwards in your browser: the returned SVG is drawn onto a canvas at the size you chose and exported as PNG.

Seeds make the output reproducible. The library derives the colours, their positions and the pixel layout from the seed, so typing [email protected] today and again next month gives the same picture as long as the other settings match. That is what makes the tool suitable for consistent per-user avatars: store the seed, not the image.

Settings Reference

All controls sit in the Generator Settings card. Limits below are the ones the server enforces; values outside them are rejected and the Status box shows Error.

Pixel Pattern

Step-by-Step

1. Type a seed, such as a username or email address, or click Random. You can also leave it blank.
2. Set Size and choose a Shape. For profile pictures that will be shown as circles anyway, Square gives the most flexibility.
3. Adjust Saturation, Contrast and Fade Distance to taste. To push the gradient towards a hue, pick a Base Color and switch on Use base color hue. For a flat background instead of a mesh, pick a Solid Color and switch on Use solid color (no mesh). Leave both switches off for the default seed-driven mesh.
4. Enter initials in Center Text if you want them, and choose a Font Family that will exist on the devices that display the avatar. Keep Auto font size on, or switch it off and set Font Size Ratio by hand.
5. Tune or disable the pixel overlay in the Pixel Pattern section.
6. Click Generate Avatar. The Status box changes to Processing and then Completed; Current Seed and Resolution show what was used.
7. Export with Download SVG, Download PNG, Copy SVG or Copy Data URI. The SVG code is also shown in the read-only SVG Output box.
8. Click Reset to put every setting back to its default, including switching the base colour and solid colour options off, and to clear the preview.

Export Options Explained

• Download SVG saves mesh-avatar-<seed>.svg. SVG stays sharp at any display size and is usually small.
• Download PNG saves mesh-avatar-<seed>.png at the pixel size in the Size field, rendered by your browser. Use it where SVG is not accepted, such as many social networks.
• Copy SVG copies the raw SVG markup for pasting into HTML, a design tool or a code file.
• Copy Data URI copies a string starting with data:image/svg+xml;base64, that can be used directly as an img source or CSS background.

Ideas and Good Practice

• For per-user avatars, use a stable identifier as the seed, and keep all other settings fixed so every user's image belongs to the same visual family.
• Keep Center Text short. Two or three characters read well at small sizes.
• Generic font families like monospace, sans-serif or serif render reliably; a specific font only appears if it is installed where the SVG is viewed, or when you download the PNG on a machine that has it.
• Lower Pixel Opacity or Density if the overlay competes with the text.
• Choose PNG for platforms that strip or reject SVG uploads.

Things to Avoid

• Putting private data in the seed if you plan to share it. The seed is shown in the interface and in downloaded file names.
• Expecting identical results after changing any setting. Only the same seed with the same settings reproduces the same avatar.
• Very long text. The server rejects Center Text over 24 characters, and long strings become tiny anyway.
• Values outside the ranges in the tables; the request fails with an error message in the Status area.

Limitations

• Generation needs an internet connection because the SVG is built on the server.
• Base Color and Solid Color are ignored unless their switches are on. With Use solid color (no mesh) on, the background is one flat colour, so Saturation, Contrast, Fade Distance and the base colour have little visible effect until you switch it off again.
• While Auto font size is on, the Font Size Ratio value is ignored; switch auto sizing off when you need an exact text size.
• Text is always white.
• Output is square; there are no rectangular or banner sizes.
• No batch generation; each click makes one avatar.

Frequently Asked Questions