Pens from Adam Guttentag https://codepen.io/guttentag/ en nospam@codepen.io Copyright 2024 2018-10-11T22:49:06-07:00 Photo Carousel https://codepen.io/guttentag/pen/XxRQPz https://codepen.io/guttentag/pen/XxRQPz Adam Guttentag

See the Code - See it Full Page - See Details

A simple photo carousel.

]]>
Photo Carousel 2018-10-11T22:49:06-07:00
Keypress Handling with JavaScript and SVG https://codepen.io/guttentag/pen/rxwJaG https://codepen.io/guttentag/pen/rxwJaG Adam Guttentag

See the Code - See it Full Page - See Details

Demonstrates how to handle keydown and keyup in JavaScript and connect it to SVG with Snap. Make sure the page has "focus" and just start typing. The MacBook keys will move as you type, characters will appear on the screen and information about the keys you are pressing will appear in the table. I developed it for myself to test keypresses in different browsers, but thought it would make a good tool for others. Enjoy! (Only keys that appear on a MacBook have names here, but if you are using an extended keyboard or a PC, the appropriate keycodes will still show up). I'll add a blog post in the next day or so explaining how it works and how it could be useful, but even without that, it's just fun to type away and watch the keys move.

]]>
Keypress Handling with JavaScript and SVG 2016-01-12T04:11:27-07:00
Git Branch Diagram https://codepen.io/guttentag/pen/rOxzwQ https://codepen.io/guttentag/pen/rOxzwQ Adam Guttentag

See the Code - See it Full Page - See Details

Interactive SVG version of the [hand-drawn diagram in Udacity's Git course](https://www.udacity.com/course/viewer#!/c-ud775-nd/l-2969618657/e-2958508789/m-2990858927). In this version, mouseover a commit and the diagram shows you which commits are "reachable" from there.

]]>
Git Branch Diagram 2015-09-14T23:45:44-07:00
SVG Sandbox https://codepen.io/guttentag/pen/aOvVRw https://codepen.io/guttentag/pen/aOvVRw Adam Guttentag

See the Code - See it Full Page - See Details

An animated tool to help teach SVG. Uses snap for the animation. Unfinished, but still a useful tool to visualize what the code does, especially for learning path data syntax. (this version has snap embedded in the HTML because I was throwing a quick demo together on short notice... TODO: remove the embedded library and link to it properly)

]]>
SVG Sandbox 2016-02-11T01:52:59-07:00
Keypress Handling with JavaScript and SVG https://codepen.io/guttentag/pen/MYZZvG https://codepen.io/guttentag/pen/MYZZvG Adam Guttentag

See the Code - See it Full Page - See Details

Demonstrates how to handle keydown and keyup in JavaScript and connect it to SVG with Snap. Make sure the page has "focus" and just start typing. The MacBook keys will move as you type, characters will appear on the screen and information about the keys you are pressing will appear in the table. I developed it for myself to test keypresses in different browsers, but thought it would make a good tool for others. Enjoy! (Only keys that appear on a MacBook have names here, but if you are using an extended keyboard or a PC, the appropriate keycodes will still show up). I'll add a blog post in the next day or so explaining how it works and how it could be useful, but even without that, it's just fun to type away and watch the keys move.

]]>
Keypress Handling with JavaScript and SVG 2015-03-23T21:06:25-07:00
Animated SVG Logo https://codepen.io/guttentag/pen/wBXgem https://codepen.io/guttentag/pen/wBXgem Adam Guttentag

See the Code - See it Full Page - See Details

Snap.svg implementation of an animated SVG logo, complete with oldschool text-to-speech voice telling you what each letter stands for. This is meant to be a demonstration of how to create and animate SVG with snap while tying audio triggers into the javascript.

]]>
Animated SVG Logo 2015-02-27T00:38:31-07:00
iOS 8 Update Animated Icon https://codepen.io/guttentag/pen/NPgqZg https://codepen.io/guttentag/pen/NPgqZg Adam Guttentag

See the Code - See it Full Page - See Details

This is a Snap.svg version of the animation Apple uses in iOS 8 to indicate that a operating system update is being downloaded or installed. Compatible with any modern browser IE9 or newer.

]]>
iOS 8 Update Animated Icon 2015-01-23T04:17:06-07:00
SVG Animation Reference: Animate Path https://codepen.io/guttentag/pen/GgWOLB https://codepen.io/guttentag/pen/GgWOLB Adam Guttentag

See the Code - See it Full Page - See Details

This pen is part of a SMIL/Snap reference collection, to be grouped in a blog post later. Click on the green triangles to see the described animation in either SMIL or Snap.

]]>
SVG Animation Reference: Animate Path 2015-01-15T03:03:35-07:00
Snap Paper Crane https://codepen.io/guttentag/pen/emvYpq https://codepen.io/guttentag/pen/emvYpq Adam Guttentag

See the Code - See it Full Page - See Details

This is a version of my SMIL paper crane done with Snap.svg this time so it will work in Internet Explorer. More details to come.

]]>
Snap Paper Crane 2015-01-13T02:12:21-07:00
Getting Started with Snap.svg https://codepen.io/guttentag/pen/XJNEyg https://codepen.io/guttentag/pen/XJNEyg Adam Guttentag

See the Code - See it Full Page - See Details

This is a basic tutorial to get started with Snap.svg vector graphics animation. SMIL is far easier to work with than Snap, but Snap supports IE 9 and newer, and all modern browsers. The official Snap demos assume a working knowledge of JavaScript, so I decided to create a series of demos a total beginner could tinker with and understand.

]]>
Getting Started with Snap.svg 2015-01-05T16:39:46-07:00