Interactive Graphic Design

Using the power of SVGs and a little CSS and JavaScript, you can make your designs come alive! Whether that's through an interactive point-and-click map, responsive infographics, or... really whatever you can imagine! Anything is possible. Let me show you what interactive SVGs can do for you.

The Interactive Map

I made this Customizable Map for the Office of Events at Utah State Unversity.

Try it out! Put yourself in the shoes of one of our Event Coordinators and build a map for an event on USU Campus. Then save it as a PDF to send, or print it out.

How to use the Map

  1. Click on any Building, Parking Lot, or Green space to highlight it on the map, and it will automatically populate in the List. Notice how the colors will update in the Legend at the bottom.
  2. The Modify Menu is a special section that won't print with your map, but will allow you to make changes to the map, such as:
  3. Use the Modify Menu to remove construction zones if they aren't necessary for your map. or to hide the section East of 1200.
  4. Use the Modify Menu to add a Point of Interest. Click and drag the POI to move it wherever you want. Double-click the POI to remove it.
  5. Double-Click certain items to change text like: The Map Title, The Point of Interset Title, each item in the Point of Interst List, and even the names of the buildings in the venue list.

Interactive Project Links

Get a taste of some of my interactive projects. These are development pages and are barebones in scope. But mess around with them and see what you can do with interactive SVGs and JavaScript!

Custom Full Campus Map

Custom Landscape Map

Directions Map