SVG to TGS Telegram sticker animation
English

telegram animated sticker maker

Telegram Animated Sticker Maker

Learn one clear motion with a pulsing circle, then use the editor to animate your own SVG and check the exported TGS.

Animate your SVG

Free conversion and download after Telegram login; additional presets are available with Pro.

Animate your SVG Static vector SVG. Embedded images and text are ignored during export.
Animate your SVG
Browser-based editor Vector SVG inputPreview before exportTGS download

A worked source example

Scale changes; the centre stays still

A closed path with four Bézier points makes the scale change easy to inspect. The circle grows and returns to its initial size without moving its centre. Compare the three illustrated frames.

Scale changes; the centre stays still — Frame 0
Frame 0
Scale changes; the centre stays still — Frame 60
Frame 60
Scale changes; the centre stays still — Frame 119
Frame 119
Canvas
512 × 512
Timeline
2 s · 60 FPS
TGS size
394 bytes
Scale
85% → 100% → 85%
Centre
256, 256

  1. Separate position from size

    The layer position stays at 256, 256. Its path is centred around the layer origin. If an equivalent circle drifts while growing, check its anchor and placement before changing the animation duration or adding more keyframes.

  2. Read the three scale values

    Frames 0, 60 and 119 use 85%, 100% and 85% scale. At full size the path spans 216 pixels across; at 85% it spans 183.6. The SVG shows full size, not frame 0.

  3. Inspect the return

    The first and last illustrated sizes match, but these snapshots do not show every moment between them. Play the TGS to judge the timing and the repeated transition. Check the largest shape when assessing clearance around the artwork.

This reference was authored programmatically, not exported from an editor preset. Editor results may differ. Structural checks do not guarantee Telegram acceptance.

One circle, one animated property

The pulse-circle teaching example keeps a blue circle at (256, 256) on a 512 × 512 canvas. Its position and rotation stay fixed. Only horizontal and vertical scale change: 85% → 100% → 85%. That makes it easy to see what a scale animation does.

The circle has a radius of 108 units at full scale. Its visible diameter changes from 183.6 to 216 units while the center stays in place. If your own pulse drifts sideways, inspect the anchor and position rather than changing the duration.

Read the two-second timeline

The reference JSON uses 60 FPS and a 120-frame composition, so its duration is two seconds. The last scale key is at frame 119, just before the composition ends. These are values in the downloadable reference, not numerical settings promised by an editor preset.

  • Frame 0: X and Y scale are 85%.
  • Frame 60: the circle reaches 100%.
  • Frame 119: scale returns to 85%.
  • Position remains (256, 256) throughout the loop.
  • Watch several repetitions to assess the transition back to the start.

Study the reference, then make your own version

Our 394-byte pulse-circle.tgs and its readable JSON were authored programmatically as teaching files. The SVG contains the still circle; the TGS and JSON contain the motion. The editor does not import these TGS or JSON files.

Upload the SVG and try an available pulse preset to explore similar motion. The preset uses its own timing and scale pattern, so your export need not match this example frame for frame or byte for byte. Compare the rhythm, center and readability of the result.

How it works

Make and review a simple animated sticker

Learn one clear motion with a pulsing circle, then use the editor to animate your own SVG and check the exported TGS.

  1. Start with one clear shape

    Download the circle SVG or choose a simple vector symbol. Avoid changing the shape and motion at the same time while learning.

  2. Import and sign in with Telegram

    Select the SVG to open the conversion workflow. The service receives a diagnostic copy of the selected source; animation and TGS generation run in your browser.

  3. Choose an available motion preset

    Try the pulse preset and inspect its actual preview. Adjust the available controls for your artwork instead of expecting the reference JSON keyframes to be imported.

  4. Watch the center and loop

    Replay several cycles. Check that the artwork stays centered, remains readable at its smallest size and changes smoothly when the loop restarts.

  5. Export, check and publish

    Download your TGS and run the file checker. Also inspect the animation visually, then follow the publishing guide and test the file in Telegram.

Use cases

Where this workflow fits

Create vector artwork for Telegram stickers, custom emoji and branded packs.

A confirmation symbol

Use a restrained size change to draw attention to one recognizable shape.

A logo with a fixed center

Compare scale motion without moving the logo across the canvas.

A motion baseline for a pack

Choose a consistent rhythm, then test it separately on each source rather than assuming all silhouettes need the same scale.

Format

Matching endpoints are only part of a good loop

A loop can return to the same size yet still feel abrupt if the motion changes speed at the boundary. Watch the end-to-start transition as well as the largest and smallest frames. The circle keeps all other properties fixed so that this comparison is easy to make.

The TGS checker measures file properties and looks for structural problems. It does not render every frame or certify a seamless loop, unclipped motion or acceptance by Telegram. Those steps still need a visual preview and a test of the final file.

Tips and requirements

Keep the first animation easy to evaluate

  • Change one motion control at a time and compare several complete loops.
  • Check the shape at its smallest size, not only the full-size frame.
  • Leave space around the maximum scale so strokes and details remain inside the canvas.
  • Keep a static source and your final TGS together; the converter cannot reopen a TGS as an editable project.

Try a sample SVG and TGS

Download the SVG to try the converter, or inspect a small animated TGS export.

FAQ

Frequently asked questions

Why is the circle example two seconds long?

Its composition runs from frame 0 to the exclusive endpoint 120 at 60 FPS: 120 ÷ 60 = 2 seconds. The final scale key is at frame 119, about 1.983 seconds.

Will the pulse preset reproduce 85% → 100% → 85% exactly?

No. Those values belong to the programmatically authored example. The editor pulse preset has its own scale pattern and timing; compare your actual preview and exported result.

Can I upload the circle JSON to edit it here?

No. Import the SVG source instead. The JSON is provided so you can inspect the reference animation, and its TGS can be opened in the separate checker.

Can I make this kind of sticker without After Effects?

Yes. The SVG editor provides simple animation presets and TGS export after Telegram login. More advanced presets and connected Telegram tools are available with Pro.

Does a file-check result guarantee a smooth loop?

No. The checker cannot judge the visual motion. Replay your final TGS and check the transition between cycles before publishing.

Start now

Give one SVG shape a clear motion

Sign in with Telegram, try a preset and review the complete loop before downloading your TGS.

Animate your SVG