How to Start Using Trangram

Updated

Open trangram.com in a browser and click Create to enter the vector editor — no installation, login, or sign-up is required. From there, the fastest way to get productive is to pick one feature (like morphing shapes or motion paths) and follow its built-in tutorial rather than trying to learn everything at once.

Step 1: Open the editor

Go to trangram.com and select Create. The editor runs in the browser, so there is nothing to download and no account step standing between you and a blank canvas. If you want to see what the tool can produce before committing time, browse the Showcase first.

Step 2: Learn one feature at a time

Trangram's homepage links a "Watch tutorial" video for each core capability. Working through them individually is more effective than jumping between tools. The main ones are:

Feature What it does
Morph shapes Smoothly transitions one shape into another (e.g., square to circle, star to heart)
Round corners Rounds shape corners in Round, Inverted Round, or Chamfer styles
Combine shapes Boolean operations — unite, subtract, intersect, exclude
Trim Path Creates self-drawing animations by gradually revealing or erasing a line
Motion Path Moves an object along a defined track from one place to another
Parent Link Makes child objects follow a parent object's movements and transforms
Looping Controls repetition: Cycle, Ping Pong, or Continue
Easing Sets motion feel: Ease In, Ease Out, Ease In Out, Step Functions
Clipping Mask Reveals only part of an object, like a stencil or cutout
Number Animation Animates numbers with formats such as commas, decimals, or leading zeros
Group Animation Organizes objects so they animate together, including nested groups

A practical starting order

  1. Combine shapes and Round corners — these build the static artwork you'll animate.
  2. Group Animation — organize that artwork into groups before adding motion.
  3. Motion Path, Easing, and Looping — give objects movement and control how it repeats.
  4. Morph shapes and Trim Path — add the more distinctive transitions once the basics feel comfortable.

Step 3: Check the Showcase and FAQs

The Showcase gives you finished examples to reverse-engineer or use as a target for your own work. The FAQs page covers common questions, and the Change Log shows what has recently been added or adjusted — useful if a tutorial looks slightly different from your current editor.

Things to know before you start

  • Maintenance window: Trangram has a scheduled maintenance period on May 1, 2026, from 2:00 PM to 6:00 PM (AEST). The editor may be unavailable during that time, so plan longer sessions around it.
  • No account means no cloud sync expectation: since no login is required, don't assume your work is saved to an account — export or download anything you want to keep.
  • Tutorials are per-feature, not a single course: expect to watch several short videos rather than one long walkthrough.

What to do next

Start with a single simple goal — for example, morph a square into a circle and loop it — and use only the tutorials that goal requires. Once that works end to end, add one more feature. This keeps the learning curve flat and gives you a finished result at each stage.