Skip to content
Limited timeStarter is now $9 a month instead of $20.See plans
charmotion
Get started

How to Turn a Flat 2D Logo Into a 3D Logo Animation

By the Charmotion team · Updated

Cover illustration for the guide: How to Turn a Flat 2D Logo Into a 3D Logo Animation, with Charmotion demo characters

To make a 3D logo animation from a 2D logo, import the logo's SVG into Blender as curves, extrude and bevel it, give it a metal or glass material, light it, animate a short camera move and render an image sequence. Encode an MP4 for social posts and a transparent WebM or MOV for editors and websites.

Key takeaways

  • Blender's SVG importer reads path geometry only; fills, strokes, gradients and text are ignored, so outline strokes and text before export.
  • Curve Extrude gives the logo depth and Bevel rounds its edges so they catch light.
  • The Principled BSDF covers metal (Metallic 1), glass (Transmission with IOR 1.5) and lacquered plastic (Coat).
  • Render a PNG sequence with a transparent film first, then encode MP4, VP9 WebM and other formats from it.
  • A rendered video looks better but cannot react; use real-time three.js when the logo should follow the pointer.

Already have a character or logo? See examples in real app screens: splash, onboarding, loading and empty-state screens, with the animation that plays in each.

Should a 3D logo animation be rendered video or real-time 3D?

Decide this first, because it changes everything after the model.

Rendered video (Blender)Real-time 3D (three.js)
LooksPath-traced light, refraction, soft shadows, depth of fieldGood PBR materials; glass and refraction are harder
InteractionNone: it plays the same every timeFollows the pointer, reacts to scroll
Where it worksSocial posts, ads, video intros, slides, any web pageWeb pages with WebGL
FileMP4, WebM or MOVA .glb model plus code

Blender ships two engines. Cycles is "Blender's physically-based path tracer for production rendering." EEVEE is "Blender's realtime render engine focused on speed and interactivity"; its docs say it "is not a path tracer" and that "Cycles will always provide more physically accurate renders." For a short logo clip, EEVEE renders fast enough to iterate, and Cycles is worth the time for glass.

The same model can serve both: render a cinematic intro, and export the mesh as a GLB for an interactive 3D logo on your website.

How do you prepare a flat logo for 3D?

You need a clean vector file. Blender's importer is strict: "Currently the importer only supports SVG path geometry. Other SVG features such as gradients, fills, strokes, text objects, images, and filters are ignored during import."

  • Outline the text. In Figma, the SVG export option Outline text means "Figma converts any text layers into glyphs." Other tools have an equivalent "create outlines" command.
  • Outline the strokes. A line drawn as a stroke has no area. Convert it to a filled shape, or it disappears or becomes a hairline in Blender.
  • Keep parts separate. If the symbol and the wordmark should move independently, keep them as separate paths and name them.
  • Remove what will not survive. Gradients, shadows and glows come back as materials and lights in 3D, not from the SVG.

Only have a PNG? Trace it into vector paths first, and check the curves against the original at high zoom. A 3D render magnifies every bump in an outline.

How do you extrude and bevel a logo in Blender?

  1. Import: File, Import, SVG as Curves. The manual notes that curves are "created in the XY plane and scaled according to the SVG document units," so expect to scale the logo up and rotate it to face the camera.
  2. Extrude: in the curve's Geometry panel, raise Extrude to give the flat shape thickness.
  3. Bevel: in the same panel, a Round bevel's Depth sets "the size of the cross section" and Resolution "drives the number of vertices in the cross section," so higher values give smoother edges.
  4. Or bevel as a mesh: convert the curve to a mesh and add a Bevel modifier. Its Limit Method set to Angle bevels "only the sharp edges of an object without affecting its smooth surfaces." Segments sets how many edge loops form the rounded edge.

A small bevel matters more than its size suggests: perfectly sharp edges render as hard lines with no highlight, and the rounded edge is where the light reads. Keep it subtle on thin letters so the counters (the holes in letters such as a, e and o) do not fill in.

If the logo will also go to the web as a GLB, convert it to a mesh before exporting. Blender's glTF exporter does not keep curves.

How do you make glass, metal or plastic logo materials?

Everything starts from the Principled BSDF, which Blender describes as a node that "combines multiple layers into a single easy to use node." Four inputs do most of the work for logos:

LookSettingsWhat the manual says
Polished metalMetallic 1, low Roughness, brand color as Base ColorMetallic 1 "gives a fully specular reflection tinted with the base color"
Brushed or satin metalMetallic 1, higher RoughnessRoughness 0 "gives a perfectly sharp reflection, while 1.0 gives a diffuse reflection"
GlassTransmission Weight 1, IOR 1.5, low RoughnessIOR "1.5 is a good approximation for glass"
Glossy plastic or lacquerMetallic 0, brand color, Coat onCoat simulates "a clearcoat, lacquer or car paint"

Two practical notes. Metal shows its environment more than its own color, so a metal logo in an empty scene looks black: give it an environment or bright shapes to reflect. Glass needs something behind or around it to bend; on a plain background it can nearly vanish. If brand color accuracy matters, compare a rendered frame against the brand value, since lighting shifts it.

How should you light and move the camera for a 3D logo reveal?

Light for the edges. A large soft light at an angle to the front face, a rim light behind to separate the logo from the background, and an environment for reflections is a dependable start. Then animate one thing well rather than several things at once.

  • Camera move: a slow push-in or a short arc that ends square to the logo. The last frame should be the logo face-on and readable, held for a moment.
  • Focal length: the manual explains that longer focal lengths give "a smaller FOV (more zoom)." A longer lens flattens perspective, which keeps letters from distorting near the frame edge.
  • Depth of field: set the logo as the Focus Object; a lower F-Stop "gives a strong depth of field effect." Keep the final frame sharp.
  • Timing: the Frame Range panel sets length, and frames divided by frame rate gives seconds. Blender's example: "a 250 frame animation at a frame rate of 30 will last 8.3 seconds." Logo reveals are usually far shorter.

A light sweep across a metal face is the classic logo move because the shape stays still and only the reflection travels. For when a reveal, a sting or a loop fits, see logo reveal vs sting vs loop.

Which Blender render settings matter for a logo animation?

  • Transparent film. Film, Transparent will "render the background transparent, for compositing the image over another background." In Cycles, Transparent Glass renders transmissive surfaces as transparent too, "for compositing glass over another background."
  • Noise. In Cycles, a Noise Threshold turns on adaptive sampling, and Denoising "uses a specialized algorithm to get a less noisy image without requiring more samples." Check a still frame at full size before rendering the whole clip.
  • Images first. Blender's output docs advise against rendering straight to video: if rendering fails, "the file might become unplayable and you will have to re-render all frames." Render a PNG or OpenEXR sequence, then encode.
  • Even dimensions. Blender notes that "H.264 requires both width and height to be divisible by 2."
  • Color mode. Choose RGBA for the image sequence, which "saves red, green, blue and alpha channels." Not every image format offers it; PNG does.

Which output formats do you need, including transparent video?

Keep the transparent PNG sequence as your master and make every delivery file from it.

FileTransparentUse it for
MP4 (H.264)NoSocial posts, ads, anything on a solid background
WebM (VP9)YesWebsites in Chrome, Edge and Firefox, OBS
MOV (HEVC with alpha)YesSafari, iPhone and iPad, Apple apps
MOV (ProRes 4444)Yes, when encoded with alphaVideo editors
PNG sequenceYesMaster file, compositing

Blender's own format table ticks alpha for VP9 WebM, PNG and QuickTime Animation, and not for H.264 or H.265/HEVC. So an HEVC-with-alpha MOV for Safari has to be encoded from the image sequence in another tool. Blender's output settings describe the ProRes 4444 profile as supporting "full-resolution RGB and alpha channels," although the format table does not tick alpha for ProRes, so test a short clip in your editor before rendering everything.

On the web, MDN notes that "Safari does not support alpha transparency" in VP9, which is why sites serve both WebM and HEVC. Details are in transparent MP4 and HEVC alpha and transparent animated logos.

Can you get a cinematic 3D logo animation without learning Blender?

You can hire a motion designer (see how to animate a logo, compared), or use a service. Charmotion's Motion Studio makes a cinematic 3D video from your own logo file on the All in one plan ($100/month as of November 2026): a rendered 3D logo reveal for launches, ads and video intros, delivered as MP4, transparent WebM and HEVC-alpha MOV. The logo's shapes come from your file and are not redrawn.

Starter ($9/month) covers Rive and interactive three.js logo animations but not rendered 3D video. Concepts are free on every plan, so you can see the idea before building it.

How to make a 3D logo animation from a flat logo in Blender

  1. Clean the vector. Outline text and strokes, keep parts as separate named paths and export an SVG.
  2. Import as curves. Use File, Import, SVG as Curves, then scale and rotate the logo to face the camera.
  3. Extrude and bevel. Set Extrude for thickness and a Round bevel Depth for rounded edges, or convert to a mesh and add a Bevel modifier.
  4. Assign materials. Use the Principled BSDF: Metallic for metal, Transmission with IOR 1.5 for glass, Coat for lacquer.
  5. Light and animate. Add an environment and a rim light, then animate a short camera move or light sweep that ends face-on.
  6. Render images. Turn on Film Transparent, set RGBA PNG output and render the frame range as an image sequence.
  7. Encode deliveries. Make an MP4 for social, a VP9 WebM with alpha for the web and an HEVC-alpha or ProRes 4444 MOV for Apple apps and editors.

Frequently asked questions

Can I make a 3D logo animation from a PNG logo?

Not directly in Blender, whose SVG importer needs vector paths. Trace the PNG into vector shapes first, check the outlines at high zoom, then import the SVG. A 3D render magnifies small bumps in a traced outline, so clean curves are worth the time.

Should I use Cycles or EEVEE for a logo animation?

Use EEVEE to block out lighting and timing quickly, and Cycles for the final render if the logo is glass or relies on accurate reflections. Blender's docs describe EEVEE as a rasterizer that is not a path tracer and say Cycles gives more physically accurate renders.

Why does my transparent 3D logo render show a black background?

Either Film Transparent was off, or the frames were encoded to a codec without alpha. Blender's format table shows no alpha for H.264 or HEVC, so an MP4 always has a solid background. Render an RGBA PNG sequence and encode a VP9 WebM or a MOV with alpha from it.

Sources

Related guides