简体中文
English
Website review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is Trangram?
Trangram is a browser-based vector graphics editor with animation tools, accessible at Trangram. According to its site, it runs online with no installation, login, or sign-up required, and its tagline is "Design. Animate. Iterate." — positioning it as an all-in-one free vector editor for creating and animating vector artwork.
What you can do with it
Based on the features listed on the site, Trangram covers both static vector drawing and motion:
- Shape morphing — transition one shape into another, such as a square into a circle or a star into a heart.
- Shape building — Boolean operations (unite, subtract, intersect, exclude) to combine shapes, plus corner styles including Round, Inverted Round, and Chamfer.
- Path-based animation — trim paths for self-drawing line effects, and motion paths to guide objects along a route.
- Hierarchy and control — parent links so child objects follow a parent's transforms, and groups (including nested groups) for animating objects together.
- Timing controls — easing options (Ease In, Ease Out, Ease In Out, Step) and looping modes (Cycle, Ping Pong, Continue).
- Masking and data — clipping masks to reveal only part of an object, and number animation with formats like commas, decimals, and leading zeros.
Who it suits
It fits people who want quick vector animation without installing software or creating an account: students, educators, social media creators, or developers prototyping a small animated graphic. The trade-off is that a browser tool is typically lighter than a full desktop animation suite, so complex rigging, heavy asset pipelines, or large-team collaboration may be better served elsewhere. The site also notes scheduled maintenance on May 1, 2026, from 2:00 PM to 6:00 PM AEST — a reminder that an online-only tool depends on the service being available.
Next step
Open the editor and try one small task end to end: draw two shapes, apply a Boolean operation, then animate a morph between them. If that workflow feels natural, the easing, looping, and parent-link features are where the tool's animation depth shows up.
How do I create and animate vector graphics in Trangram without signing up?
Open Trangram in a modern browser, choose Create from the menu, and start drawing on the canvas. The page states the editor is browser-based with no installation, login, or sign-up required, so your work begins immediately. Use the vector tools to draw or combine shapes, then switch to animation controls to add motion.
A practical first project
- Draw a simple shape, such as a circle or star.
- Add a keyframe or animation track for that shape.
- Apply a transform, such as moving it across the canvas or scaling it up.
- Add easing to smooth the movement, or a motion path to guide it along a curve.
- Preview and adjust the timing until it feels right.
Features worth trying early
The page lists several animation tools that are useful for beginners:
- Morph shapes — transition one shape into another, such as a square into a circle.
- Motion path — make an object follow a specific route instead of a straight line.
- Trim path — reveal or erase a line gradually for self-drawing effects.
- Parent link — move a parent object and have linked child objects follow.
- Looping — choose Cycle, Ping Pong, or Continue for repeated motion.
- Easing — use Ease In, Ease Out, Ease In Out, or step functions for natural timing.
- Clipping mask — reveal only part of an object, like a stencil.
- Number animation — animate numbers with formats such as commas or decimals.
- Group animation — organize objects into groups and animate them together.
What to expect
Because there is no account requirement, you can test the editor quickly without commitment. The trade-off is that browser-based tools depend on your connection and browser performance, and you should check whether your work is saved locally or exportable before relying on it for a long project. For a quick explainer graphic, animated icon, or simple motion test, the workflow is direct: design, animate, iterate.
Next step: open the Showcase for finished examples, then try the Morph shapes or Motion path tutorial to learn one feature at a time.
Can I use Trangram to morph shapes and create smooth transitions between objects?
Yes. Trangram includes a morph feature that transitions one shape into another — for example, a square into a circle or a star into a heart — and it also offers easing controls so those transitions can be smoothed, sped up, or slowed down rather than played linearly.
For a quick test, open the editor, draw two shapes, apply morph between them, then add an Ease In Out to the transition and preview the loop.
H3 Useful related features
- Easing: Ease In, Ease Out, Ease In Out, and Step functions control pacing.
- Looping: Cycle, Ping Pong, and Continue set how repeats behave.
- Motion Path and Parent Link: Move objects along a route or make child objects follow a parent's transforms.
- Trim Path: Reveal or erase lines progressively for self-drawing effects.
H3 When morphing fits — and when it doesn't Morphing works best for simple silhouettes with a similar structure, such as icons, blobs, or logo marks. If two shapes have very different outlines or many separate parts, the in-between frames can look tangled; in that case, animate position, scale, or opacity instead, or break the change into stages.
A practical scenario: a small product team needs an animated logo transition for a landing page. Morph handles the shape change, Ping Pong keeps it looping, and Ease In Out prevents a mechanical feel — all without installing software.
If you want to see finished examples before building your own, browse Trangram's Showcase, then compare the workflow with a general-purpose tool such as Figma if you need collaborative design files alongside animation.
What are the key animation features in Trangram, such as trim paths and motion paths?
Trangram's animation toolkit centers on motion techniques that are usually reserved for desktop vector software. The page lists trim paths, motion paths, parent links, looping, easing, clipping masks and number animation as built-in capabilities of the browser editor. In practice, these fall into three groups: path-based motion (trim paths, motion paths), relationship-based motion (parent links, groups), and timing or presentation controls (looping, easing, clipping masks, number animation).
Path-based motion
- Trim Path reveals or erases a line gradually, which is how self-drawing line animations are made. A practical use is an animated signature or an icon whose outline draws itself on screen.
- Motion Path moves an object along a defined route rather than in a straight line. A simple example is a delivery van icon following a winding road across a map.
Relationship-based motion
- Parent Link makes child objects follow whatever transforms the parent receives, so moving one object can move a whole set in a coordinated way. This suits characters or grouped interface elements.
- Group Animation and nested groups let you animate collections together, with nested groups useful when different parts need separate transformations.
Timing and presentation
- Looping offers Cycle (replay from the start), Ping Pong (forward then reverse) and Continue (finish the cycle, then carry on from where it stopped).
- Easing includes Ease In, Ease Out, Ease In Out and step functions, controlling whether motion accelerates, decelerates or snaps.
- Clipping Mask acts like a stencil, showing only the part of an object inside the mask shape.
- Number Animation animates figures as easily as text, with formats such as commas, decimals and leading zeros — useful for counters, statistics or countdowns.
A sensible next step is to pick the technique that matches your goal: use trim paths for line reveals, motion paths for travel, parent links for coordinated movement, and easing or looping to refine the feel. If you want to see these effects in finished work before building your own, browse the Trangram showcase.
How do I use Trangram's Boolean operations to combine or subtract shapes?
Boolean operations in Trangram let you build one new shape from two or more overlapping ones. Select the shapes you want to work with, then choose the operation that matches the result you need: Unite (merge into one outline), Subtract (cut the top shape out of the one below), Intersect (keep only the overlapping area), or Exclude (keep everything except the overlap). The result is a single editable shape you can then round, animate, or combine again.
H3 Practical ways to use each operation
- Unite — join a circle and a rectangle into a single rounded keyhole or pill shape, then animate it as one object.
- Subtract — cut a hole in a filled shape, such as punching a circle out of a square to make a ring or a window.
- Intersect — keep only where two shapes cross, useful for creating a lens, a leaf, or a custom overlap region.
- Exclude — produce a shape with the overlap removed, giving a stencil or interlocking look.
H3 A concrete workflow
- Draw your base shape first; this is the shape that stays when you subtract.
- Draw the shape you want to add or remove on top, overlapping the base.
- Select both shapes, then apply the Boolean operation.
- Adjust the result with Round corners (Round, Inverted Round, or Chamfer) if you want softer edges.
- Animate the combined shape with Morph, Trim Path, or Motion Path, since it now behaves as one object.
H3 Choosing between them
| Goal | Operation |
|---|---|
| Merge two shapes into one | Unite |
| Cut a hole or notch | Subtract |
| Keep only the overlap | Intersect |
| Remove the overlap | Exclude |
If the result looks wrong, the usual cause is stacking order: Subtract removes the upper shape from the lower one, so try reordering and applying it again. Because Trangram runs in the browser without installation or sign-up, you can test combinations quickly and undo freely. For broader vector work outside this tool, Inkscape offers similar path operations on the desktop.
Is Trangram free to use and what are its limitations compared to paid vector editors?
Yes — Trangram is free to use. Its own description states it is a browser-based vector editor with no installation, login, or sign-up required, and the page headline is "Design. Animate. Iterate. All in one free vector editor." Nothing on the page signals paid tiers, subscriptions or payment platforms, so the free access appears to be the whole product rather than a trial.
The more useful question is what kind of work it is built for. Trangram combines static vector drawing with motion features in one browser tab, which is unusual: most free tools do one or the other, and most paid editors assume you will export into a separate animation program.
What the free tool actually covers
From the features listed on the page, you get a fairly complete set for shape-based motion work:
- Shape morphing – transition one shape into another (a square into a circle, a star into a heart).
- Corner controls – round, inverted round and chamfer styles on any shape.
- Boolean operations – unite, subtract, intersect and exclude to build new shapes.
- Trim paths – reveal or erase a line gradually for self-drawing animations.
- Motion paths – make objects travel along a defined track.
- Parent links – child objects follow the transforms of a parent.
- Looping modes – cycle, ping pong and continue.
- Easing – ease in, ease out, ease in out and step functions.
- Clipping masks – stencil one object inside another.
- Number animation – animate counters with commas, decimals and leading zeros.
- Groups and nested groups – organise and animate objects together.
Where paid editors usually pull ahead
This is general advice rather than a claim about Trangram's roadmap. Paid vector suites typically differentiate on:
| Area | Typical paid-editor advantage | Why it matters |
|---|---|---|
| Export formats | Native project files, print-ready PDF, SVG/CSS pipelines | Handoff to developers, printers or other apps |
| Precision tools | Advanced typography, colour management, symbol libraries | Brand and print work |
| Collaboration | Shared libraries, version history, comments, roles | Team workflows |
| Ecosystem | Plugin marketplaces, third-party integrations | Extending the tool without leaving it |
| Support | Guaranteed SLAs, onboarding, training | Business-critical deadlines |
A free browser tool also carries practical trade-offs that have nothing to do with features: your work lives in a tab, so you depend on the service staying up (the page itself notes scheduled maintenance on 1 May 2026, 2:00 PM–6:00 PM AEST), and long-term file portability is worth testing before you commit a big project.
Who should use it
- Beginners and students learning animation principles — morphing, easing, trim paths and looping are exactly the concepts worth practising, and there is no cost barrier.
- Marketers and social creators making short shape-based motion graphics, counters or logo reveals.
- Developers and designers prototyping an interaction or icon animation before rebuilding it in code.
If your work depends on print output, shared asset libraries or a formal support contract, a paid editor is likely the better home for it — and you can still use Trangram for quick motion experiments.
Next step: pick one real asset you need — say, an animated number counter for a landing page — and rebuild it in Trangram. If the export and fidelity hold up, keep it in your toolkit; if you hit a wall, that wall tells you which paid feature you actually need. For a fuller sense of what others build with it, the site's own Showcase section is the place to look: Trangram.
Namecheap
Fastly
User reviews (0)