Home » Javascript » Create 3D SVG or HTML5 Canvas using Seen.js

Create 3D SVG or HTML5 Canvas using Seen.js

Seen.js is an awsome javascript library to create 3D shapes and 3D animations in SVG or in HTML5 Canvas. This is a standalone javascript library and have no dependencies. It is very nice and very simple to create powerfull complex 3D shapes and 3D animations in SVG or HTML5 Canvas.

Seen.js contains a simple abstraction on top of the graphics capabilities of SVG and HTML5 Canvas elements. All of the other components of this library are agnostic to the type of context it will be rendered in. However, there are some performance considerations.

Creating elements within SVG is generally much slower than drawing directly into an HTML5 Canvas.


seen.js renders 3D scenes into SVG or HTML5 Canvas.


Screenshot from 2014-07-11 21:31:29

  • Materials gallery
  • Noisy Wave Patch
  • Noisy Sphere
  • Same Scene, Canvas vs. SVG
  • Same Scene, Multiple Angles
  • SVG Masks and Effects
  • Audio Equalizer
  • N-Body Gravity Simulation
  • 2048



Download Seen.js

website: http://seenjs.io

Implementation of Seen.js

Step 1. Create a web page including the seen library. Coffeescript is optional, but all the sample code (as well as the library source) is all coffeescript.

    <script src="seen.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>

    <svg width="400" height="400" id="seen-canvas"></svg>
    <!-- OR -->
    <canvas width="400" height="400" id="seen-canvas"></canvas>

    <script type="text/coffeescript">


Step 2. Create a scene with a single shape and render it using a context.

  # Create a shape
  shape = seen.Shapes.tetrahedron()

  # Create scene and add shape to model
  scene = new seen.Scene
    model    : seen.Models.default().add(shape)
    viewport : seen.Viewports.center(400, 400)

  # Create render context from canvas
  context = seen.Context('seen-canvas', scene)  # Render it!

Licensed under Apache 2.0

To see what is new in this version, read the release notes.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.