Independent notes on CSS, SVG, animation and front-end design.
Using a combination of CSS animation, SVG dash-array and blend modes, we can recreate a “scratch to reveal” effect for images or other content in just five steps:
Random blurred bokeh backgrounds with SVG and JavaScript
Sending the best optimized images to Retina devices
Making multiple animated elements from a single animation declaration
Enhancing the appearance of diagrams and graphs with blend modes
Presentation to the San Francisco SVG Meetup Group, July 15, 2015.
Using masks and shapes in CSS to create non-rectangular layouts
Making scroll-to-top-then-fixed work without JQuery, plugins, or even JS
Notes, demos and techniques for animation in CSS.
Scalable Vector Graphics in real-world projects.
Using CSS and SVG blend modes creatively.
Patterns, textures and creative backgrounds.
Techniques for serving the right image.
Web fonts, text effects and readable type.