What Features Does Trangram Offer for Vector Design and Animation?

Trangram is a browser-based vector editor for creating and animating graphics, and its feature set covers both sides of that workflow: shape construction and motion. Based on the site's own feature descriptions, you can morph and combine shapes, round corners, build self-drawing line effects, move objects along paths, link objects so they animate together, control looping and easing, mask layers, animate numbers, and organize everything into groups. It runs in the browser, and the site states no installation, login, or sign-up is required to use it. The sections below break down what each feature does so you can judge whether it fits your project.

Shape design tools

These are the building blocks you use before animating anything.

Morph shapes

Morphing smoothly transitions one shape into another over time. The site gives examples like turning a square into a circle or a star into a heart, but the mechanism applies to any two shapes you draw. This is the feature to reach for when you want a transformation rather than a cut or a fade.

Round corners

Any shape's corners can be rounded, and Trangram offers three styles: Round, Inverted Round, and Chamfer. The distinction matters visually — a standard round softens the corner outward, an inverted round curves it inward, and a chamfer cuts a flat angled edge instead of a curve.

Combine shapes (Boolean operations)

Boolean operations let you build new shapes from existing ones by uniting, subtracting, intersecting, and excluding them. This is how you produce compound shapes — for example, subtracting a circle from a rectangle to make a hole — without drawing the result by hand.

Animation features

Trim path

Trim paths create self-drawing animations by gradually erasing or revealing parts of a line, so it appears or disappears smoothly. This is the standard technique for a line that looks like it's being drawn as the animation plays.

Motion path

A motion path acts as a guiding track: the object moves from one place to another along a specific route. The site's analogy is a car moving along a road — useful when you want controlled movement rather than a straight-line tween.

Parent link

Linking objects with parent links means any movement or transform applied to the parent object causes the child objects to follow or respond in a coordinated way. Set up the parent once, animate it, and the children inherit the motion.

Looping

Looping controls how an animation repeats, with three modes:

Easing

Easing functions control how movement is timed — smooth, fast-starting, or gently slowing. Available options include Ease In, Ease Out, Ease In Out, and Step Functions. Step functions are the choice when you want abrupt, non-interpolated changes rather than smooth motion.

Masking, number animation, and groups

Clipping mask

A clipping mask works like a stencil: it reveals only a specific part of an image or object and hides the rest, similar to placing a cutout over a photo. Use it to confine a layer's visibility to a shape you define.

Number animation

Numbers are animated the same way you create text — specify a start and end number plus formatting such as commas, decimals, or leading zeros. This suits counters, statistics, and any figure that needs to count up or down.

Group animation and nested groups

Groups organize objects so they animate together. Nested groups are specifically useful for animating multiple transformations at once, since each level of nesting can carry its own animation while still moving as part of the larger group.

How to decide if these features fit your task

Match the feature to the effect you need:

• Transforming one shape into another → Morph shapes
• Building a complex shape from simple ones → Boolean operations
• A line that draws itself → Trim path
• Movement along a custom route → Motion path
• Many objects moving as one unit → Parent link or groups
• Repeating or back-and-forth motion → Looping modes
• Smooth vs. abrupt timing → Easing, including step functions
• Revealing only part of a layer → Clipping mask
• Counting or changing figures → Number animation

If your project needs several of these at once — say a morphing shape that follows a motion path while a number counts up inside a mask — Trangram's feature set covers that combination within a single browser-based editor, with no installation or account required according to the site.