Category Archives: SVG

Auto Andy Photo, a new HTML5 web app

Today I’m launching a little HTML5 web app called Auto Andy Photo.  The experience is simple:

  1. Drop in a photo
  2. Add an Andy or twelve
  3. Share your composition

Try it yourself!

Create something with Auto Andy Photo

Auto Andy Photo in Motion

How it was Built

This project shares the same core rendering code behind Auto Andy for iOS and Android.  I’ve ported the ActionScript 3 code to JavaScript and the rendering of the “Andy’s” happens through SVG.

This app was built on the following frameworks.

I’ve also ported over a basic version of my Graffiti Drawing Library to JavaScript to implement the masking feature in Auto Andy Photo.

Grunt JS was used as the task runner for Unit Testing, Minification / Optimizing, and deployment.

SVG Transform Rectangle for HTML5 / JavaScript

Recently I needed to implement a way to allow users to scale and rotate SVG elements in a HTML5 app. I ended up going with the traditional transform rectangle as shown below.

transform_rectangle

I thought others may find this transform rectangle useful, so I’ve shared out the code on Github.

Visit SVG Transform Rectangle on Github

View Demo Online

Basic Usage

Creating a new Transform Rectangle

Position, Size and Rotate Rectangle

Note that the x, y position of the rectangle is currently the visual center of the rectangle.

Apply Transform to other Elements

You’ll want to listen for changes in width, height and rotation on the model of the transform rectangle object.  I’ve left the transform of other elements up to the developer to implement.