Code
Featured Projects
The following are some of my recent projects.
Visualization
Image Filters
Web Concepts
Web 3D
Terraview
A 3D terrain visualization prototype.
Pano Preview
Visualize 360° panoramas.
Interactive Design
Archive
Collections of my various coding projects.
Experiments
LightTable
An interactive photo gallery. (SVG, JavaScript)
CSS 3D
Experimenting with various CSS transforms and animations
Text in Motion
Animation from small-batch artisinal code. Straight from the source to your browser.
Hyperspace
Particle System with hundreds of small, glowing dots, creating a 3D tunnel perspective.
Testing Gemma 4
Testing the Google Gemma 4 (26B A4B) model.
Compare
An interactive image comparison app based on the 'Juxtapose' project.
Tools & Widgets
Photoshop Pattern Extractor
A tool for extracting image tiles from Photoshop Pattern files (.pat).
Glitchify
A tool for adding glitch effects to raster images.
Orbify
A tool for adding spherical distortions to raster images.
Smearify
A tool for smudging and smearing pixels in raster images.
Perspective Grid Builder
A tool for creating and visualizing perspective grids with SVG.
Pattern Preview
Visualize equirectangular images as 360° panoramas.
Pano Preview
Visualize equirectangular images as 360° panoramas.
Interactive Design Projects
Inspiration
A protoype for an interactive book about Inspiration.
Anatomy of Typography
An interactive prototype for learning about typography.
Social App
An interactive prototype for for a social media app.
Back to the Titanic
Splash page for a video trailer.
Vector Gallery
A prototype image gallery to display vector graphics. (HTML, CSS, JS, SVG)
Code Snippets: SVG
SVG: Basic Elements
Drawing Basic SVG Shapes
The RECT Element
The CIRCLE Element
The ELLIPSE Element
The LINE Element
The POLYLINE Element
The POLYGON Element
The PATH Element
The TEXT Element
SVG: Presentation
Presentation Attributes & CSS
Simple Shapes A - No Presentation (Default Fill Color)
Simple Shapes B - Styling with SVG Presentation Attributes
Simple Shapes C - Styling with Internal Style Sheets (CSS)
Simple Shapes D - Styling with External CSS
Simple Shapes E - CSS Overrides Presentation Attributes
SVG: Strokes & Fills
Defining Shape Attributes
Stroke (and related attributes)
Fill (and related attributes)
Fill: fill-opacity attribute
Fill Pattern: Graph Paper
Fill Pattern: Diagonal Lines
Fill Pattern: Diagonal Crosses
SVG: Additional Elements
Other "useful" elements
The G Element (Groupings)
The USE Element (Re-use Graphic Elements)
The USE Element Again (Loading External SVG)
The SYMBOL Element (Graphic Templates)
The IMAGE Element (Loading Images)
The A, ANCHOR Element (Hyperlinks in SVG)
The ForeignObject Element (Inserting HTML into SVG)
SVG: Inside HTML
Using SVG with HTML
SVG: Masking & Clipping
Defining Shape Attributes
SVG: Filter Tests
Experimenting with Filters
SVG: Scripting
JavaScript/ECMAScript
Create SVG with JavaScript (Generate SVG <text> Element)
Button Test/Mouse Events (Testing Various Methods to Build Buttons)
SVG: jQuery
Manipulating SVG with jQuery
Create SVG with jQuery (Generate a simple SVG file)
Manipulating SVG: Test A
Manipulating SVG: Test B
Replacing HTML Text with SVG
SVG: Animation
Declarative animation with SMIL, the ANIMATE element and related elements
Animate XML Attributes
Animate CSS Attributes
Animate XML/CSS Attributes (Animating multiple attributes and shapes)
Synchronized Animation (Synchronizing the motion of two shapes)
Repeating Animation (Repeating motion n times)
Repeating Indefinitely (Creating a constant animation loop)
Break the Indefinite Loop (Canceling a constant animation loop)
SVG: Misc. Projects
Assorted SVG-related expirements and projects
Basic 3D Cube
Basic 3D Cubes (Re-use with USE)
Basic 3D Cubes from External SVG (Import with USE; restyle with CSS)
