trüfffle

PROJECT

trüfffle is a personal passion project which started as an experiment to explore to potential of animating vector shapes on the web. With time, the vision expanded to creating new media for interactive storytelling.

CODE

SVGs are scalable vector graphics that have the benefit of being responsive to any device, and of higher quality and lower file size than pixel-based GIFS and videos.

All following animations are less than 800kB, and open sourced to Codepen. Try zooming into them, and you'll see the absence of pixels.

VISION

A quick making-of video of my process into making these interactive animations, from vector illustration to code and animation.

Full interactive animation is previewed below.

Interactive SVG Animation

An interactive SVG animation made just in time for Halloween. The animation is part of an experimental personal project to bring character to interactive storytelling.

The SVG is made interactive; clicking on the moon reveals the spooky creatures hidden in the haunted mansion. Animated with Greensock.

See the Pen GlobeMail WW1 by Issey (@issey) on CodePen.

Editorial Interactive SVG Animation

An SVG animation for Canada 150th anniversary's project with the Globe and Mail, for a story on Canada abroad during WWI.

The SVG interactive with parallax between the background and foregroud, by hovering your mouse on the animation, or by rotating your mobile device right/left and up/down.

Editorial Animation for the Globe and Mail

An SVG animation for Canada 150th anniversary's project with the Globe and Mail. The animation was paired with a short fiction on the invention of the foghorn in foggy Atlantic Canada in the 19th century. Also an attempt at testing fluid motion with SMIL, seen in the water splashes, waves and fog motion.

See the Pen SVG Animation | Into the Wüuds_ by Issey (@issey) on CodePen.

Camping.

An attempt to capture outdoor camping atmospheres, with a little humour.

Under Construction

Animated SVG for a website in construction page. Had fun designing the cranes differently, and turning the illustration into an absurd story.

See the Pen SVG Animation | Windmill & sheep_ by Issey (@issey) on CodePen.

Windmill

Animating SVGs with Greensock's stagger effect to delay animation start times; the clouds, trees and grass have the same animation applied but have delayed start times.

See the Pen SVG Animation | Editorial by Issey (@issey) on CodePen.

Editorial Animation for the Globe and Mail

New animation work published in The Globe and Mail showing the potential of #SVG for storytelling and news. An SVG animation designed for an article on the fears and worries of a recurring racism resonant of pre-WWII anti-semitism.