Trangram

Trangram is a browser-based vector animation editor that lets you design and animate without writing code. It runs entirely in the browser, so there's nothing to install and no heavy software to manage. You create shapes, set keyframes, and export finished animations as video files, GIFs, or image sequences. The tool combines what would normally require a vector editor and a motion graphics app into a single interface.

The shape and path tools go beyond basic drawing. You can morph one shape smoothly into another, which is useful for logo animations or abstract motion graphics. Corners can be rounded in multiple styles including inverted rounds and chamfers. Boolean operations let you unite, subtract, intersect, or exclude shapes the way you would in a dedicated vector program. Trim path functionality enables self-drawing effects where a line appears to draw itself across the canvas. Motion paths let you guide an object along a specific trajectory instead of animating position keyframes manually.

Animation controls are designed for precision without complexity. Parent linking lets child objects inherit transforms from a parent, so you can animate a character's arm and have the hand follow automatically. Looping modes include cycle, ping pong, and continue, which handle repetitive motion without duplicating keyframes. Easing functions cover the standard set with ease in, ease out, ease in out, and step options. Clipping masks hide parts of objects outside a defined region, and groups can be animated as a unit with nested support for more complex rigs.

Import works with SVG files and the native TG project format. Export options cover MP4 and WebM for video, GIF for shareable loops, and PNG, JPG, WebP, or SVG for stills and sequences. The range of outputs makes the tool practical for social media content, UI micro-interactions, presentations, or anywhere you need a short looping animation without the overhead of After Effects or a full motion suite.

Trangram targets designers and content creators who need motion graphics but don't want to learn a professional video tool. If you can handle a vector editor like Figma or Illustrator, the interface will feel familiar. The lack of code or scripting means anyone with basic design skills can pick it up. The team uses it to create all the animations on their own site, which serves as a working demo of what's possible.

Access is free with no pricing tiers mentioned. There's a tutorial library on YouTube and community channels on Reddit and Twitter for support and inspiration. The product fills the gap between static vector design and full animation software, giving you enough power to make polished motion content without the steep learning curve.