In the beginning the web was simply a semantic layer. It was comprised entirely of text and markup. As it evolved more layout and graphics capabilities were added but comprised little more than adding images.…
Category: web
Richer Web Experiences
An article of mine was recently published in Web Designer Depot, discussing a few topics I’ve been covering in recent talks about how to make richer web experiences. It’s just a brief overview, but you…
Masking in Canvas
Because the canvas requires manual drawing through scripting we need to leverage the 2d canvas API, through the canvas’ 2d context. Clip paths in canvas are pretty straight forward. First we simply draw a path…
Masking in Design Tools
Before digital imaging similar effects to masking could be achieved through double exposure, where film is exposed to multiple negatives or shapes which combine the visible portion of the photographs. In digital media this uses…
Masking in SVG
Masking is really powerful in SVG in fact SVG has it’s own mask element specific to this purpose. <mask id=”myMask”></mask> We can add this element into our <defs> tag and then any content we add…
Masking in CSS
As far as CSS features go this is still relatively new. Because of this, support can be spotty. So let’s check out caniuse.com. Caniuse is a website created by a friend of mine Alexis Diveria,…
Animate SVG with the Flash Timeline
Here’s an introduction video to Snap.SVG Animator, allowing you to publish animated SVG from the Flash Animation tool. Scalable Vector Graphics (SVG) is a powerful tool in the web developer’s arsenal. But web creators have…
Masking in GLSL
WebGL is complicated. Libraries like Three.js have made it more approachable but to do advanced effects you still need to understand the inner workings of WebGL, this includes GLSL shaders. Shaders are small programs that…
SVG Calendar
Happy New Year! I like to make a calendar for our family each year and doing the layout in illustrator can be rather tedious. So last year I decided to write some code to do…
Script Analog Game Design with SVG
I have a great passion for games of all kinds. Since I was a kid board games were always something I enjoyed and I even would sketch out and make up my own out of…