Skip to content

component

WebX 3D SVG Renderer

By Bode Chris

Details

Summary

WebX 3D SVG Renderer combines smooth depth, rounded bevels, realistic lighting, metallic materials, gradients, shadows, floating motion, and pointer interaction in one fully…

Description

Transform SVG logos, icons, and vector marks into polished interactive 3D objects directly inside Framer. WebX 3D SVG Renderer combines smooth depth, rounded bevels, realistic lighting, metallic materials, gradients, shadows, floating motion, and pointer interaction in one fully customisable component. Upload your own SVG or begin with one of the 10 included shapes. Adjust the depth, bevel, material, camera, rotation, lighting, shadows, and interaction until the result fits your project. FEATURES • Upload your own SVG logo, icon, or vector shape • 10 built-in SVG presets • Solid and multi-colour gradient materials • Add up to 10 reusable brand colours • Smooth depth and rounded bevel controls • Metalness, roughness, reflectance, and clearcoat • Custom lighting colour, position, and intensity • Real-time X, Y, and Z rotation • Automatic rotation on any axis • Interactive tilt and orbit modes • Optional floating animation • Adjustable perspective and camera distance • Custom ground shadow • Transparent and coloured backgrounds • Responsive across desktop, tablet, and mobile • Static-renderer and viewport optimised IDEAL FOR Brand showcases, agency websites, portfolio heroes, product launches, creative landing pages, logo presentations, and immersive editorial experiences. SVG REQUIREMENTS For the cleanest result, use a standalone SVG made from filled vector paths. Convert text and strokes to outlines before uploading. The component supports transparent areas, compound paths, and logos with holes. Built by WebX by Bodilum.

Introduction

Turn any SVG into interactive 3D

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400143209/99/109/129/139/15
  • All · #755