nowfound

Dev tools · March 8, 2012

AA

Awwation, a Prezi Clone written with HTML, SVG and Js.

http://adityab.github.com/Awwation/ INFO: In firefox, when you generate a presentation, the file is saved as a .part file for some unknown reason. Just rename it to .svg and it plays alright. This works fine in Chrome. Some notes: 1. I hacked this up as a holiday project. I think using SVG for presenting is a good idea because transforming, zooming, etc is apparently 'harder' or 'unnatural' in pure HTML, from an editor's perspective. 2. Upon clicking 'generate', the editor returns an array of frame ID's in the presentation sequence - since this is, in theory, all the information required to…

Alternatives

What it does

In the maker’s words, at launch

http://adityab.github.com/Awwation/ INFO: In firefox, when you generate a presentation, the file is saved as a .part file for some unknown reason. Just rename it to .svg and it plays alright. This works fine in Chrome. Some notes: 1. I hacked this up as a holiday project. I think using SVG for presenting is a good idea because transforming, zooming, etc is apparently 'harder' or 'unnatural' in pure HTML, from an editor's perspective. 2. Upon clicking 'generate', the editor returns an array of frame ID's in the presentation sequence - since this is, in theory, all the information required to animate, any DOM animation framework, such as impress.js or dizz.js, can used for animating. Currently, it uses code from Sozi, an inkscape animation plugin, for this task. 3. The 'screenshots' of regions in the presentation path, show at the top in the strip, are taken using canvg. Since taking screenshots of the DOM is not normally possible, I had to use canvg to render the SVG on a canvas, and then crop out the region to be shown in the strip. 4. Ideally, I would have used fabric.js and Canvas to animate - fabric.js provides a kind of canvas DOM and Canvas renders things faster, being a bitmap buffer. Unfortunately, fabric doesn't import some elements like text from the input SVG (made by the editor), and you can't use a DOM animator with Canvas. [edit: typo]

Does the same job

all alternatives →
  • SVG Background Generator2018 · ▲296

    Customize, scalable backgrounds and patterns for free

  • MiroMiro v2May 2026 · ▲177

    Inspect, edit, and export any website's design

  • Gapplin2019 · ▲126

    A simple SVG viewer and editor for macOS

  • UI InspectorFeb 2026 · ▲112

    Visual CSS editor for Google Chrome

  • Gapplin2022 · ▲131

    The SVG Viewer for macOS

  • WebGrid SVG building tool2019 · ▲63

    A web app that lets you create and download svg documents.

More dev tools this month

the category →
  • Dograh▲592

    The open source VAPI alternative

    Dev tools · 25d ago · dograh.com

  • Meridian▲530

    Don't let your work go unnoticed. Get promoted!

    Dev tools · 20d ago · meridiona.com

  • x1▲516

    Lovable for iPhone apps go from idea to App Store

    Dev tools · 11d ago · x1.new

  • The GTM Co-Founder▲402

    Open-source GTM skills for technical founders

    Dev tools · 29d ago · gtmcofounder.com

  • Open-Source eInk Bike Computer▲393

    OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.

    Dev tools · 2d ago · opentrailpaper.com

  • Nuphos▲380

    The AI-Native DevOps Workspace.

    Dev tools · 24d ago · nuphos.ai

Launched alongside, March 2012

the whole month →