Back to the blog

Animation

Your logo, made solid and moving.

Make a 3D logo animation in your browser, nothing uploaded: a logo made solid turns and catches the light, saved as an MP4, a GIF or an animated GLB.

By 6 min read

A teal star on an artboard, drawn three times as it turns and grows, over a timeline with keys for its turn, size and opacity and the easing curve beside them

A logo that turns and catches the light makes a good start to a video or a page, and usually takes a 3D program and a long render. KeepSimp's 3D logo animation page opens a starter in your browser instead: a logo made solid, turning in the light, ready for your own SVG. Nothing is uploaded and there is no watermark.

Start from a logo that already moves.

The page opens on a 3D scene with a logo made solid, a camera and lights, and keys that turn it so the light runs over its edges. It is made of the editor's own parts and keys, so every part of it can be changed or taken away.

Bring in your own SVG.

Bring in your logo as an SVG, and its filled shapes are made solid in the starter's place. Holes, such as the middle of an O, stay holes. A picture such as a PNG has no outline to push out, so the logo needs to be an SVG.

For a flat logo that pops or slides in, the 2D logo animation maker is the quicker way.

Depth and rounded edges.

Depth sets how far the outline is pushed out; rounding sets how soft its edges are. Rounded edges catch the light as the logo turns, which is what makes it look solid. The shape is made as three.js's extrusion makes one.

Its look is a colour, how metal and how rough it is, and how see-through, and its colour can be keyed to change as it plays.

Light it, and move the camera.

A sun shines one way across the whole scene, a lamp all round from a point, a spotlight in a cone, and a soft light lifts the shadows. Each has a colour and a strength that can be keyed, so a light can sweep across the logo.

The camera can be keyed too, to close in or swing round. Easing decides how each move starts and ends: Overshoot gives a little bounce as the logo settles.

Save it for where it will go.

An MP4 or WebM video or a GIF shows what the camera sees, with no watermark, and a PNG saves one frame. An animated GLB is for a 3D viewer, a website or an app: it is read back before it is offered, the way it is written is held to Khronos' glTF Validator in KeepSimp's own tests, and the page says what some viewers show still.

Further reading

Topics: 3d logo animation · 3d logo animation free · animated 3d logo · svg to 3d logo · 3d logo maker · 3d logo intro · 3d logo reveal

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool