Videos

SVG Tutorial: With CSS Animation

SVG Tutorial: With CSS Animation

1 year ago
What is a vector graphic and how can we animate one? Learn by following along with this video. Link to my new premium course (with coupon): www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=19-FORYOUTUBE Link to cat drawing SVG: codepen.io/anon/pen/YppjQq Add me on Twitter for webDev updates and cat pics: twitter.com/learnwebcode
CSS-Tricks Screencast #135: Three Ways to Animate SVG

CSS-Tricks Screencast #135: Three Ways to Animate SVG

3 years ago

SVG and GreenSock for Complex Animation – Forward 4 Web Summit

2 years ago
SVG is a strong part of the future of the web-based imagery. Because it is written in math not rigid pixels, it reduces our large Front-End testing matrix and allows for interesting solutions to common web problems. When we animate SVG, we can guide our viewers with informative UX patterns, as well as create engaging […]

What Deep Dream sees — LazyWeb #12

3 years ago
The LazyWeb Show is a recap of the past week’s current events on the web platform. This week: CLICK “”””SHOW MORE”””” FOR LINKS TO EVERYTHING Jafar Husain explains the power of ES6 Generators and async functions, Marcy Sutton shows off semi-automated and fully automated tools for testing accessibility, Chris Coyier teaches the rainbow of awesome […]
CSS-Tricks Screencast #137: SVG is for Everybody

CSS-Tricks Screencast #137: SVG is for Everybody

3 years ago
Not really a screencast! My talk at BlendConf on SVG
Developer Diary #Day4

Developer Diary #Day4

1 year ago
Day 4 and Paul decides to crack the mast head images for the Chrome Dev Summit site. Easier said then done right? Right! With angular cut offs on all the images, Paul has been experimenting with SVG and found a load of ways for the images look wrong on the site. Can he find the […]

WAPG 6 SVG Animation Programming SMIL JavaScript CSS

8 months ago
Learn SVG animation techniques using animation elements(SMIL), JavaScript and CSS. Lesson Code: www.developphp.com/video/JavaScript/WAPG-6-SVG-Animation-Programming-SMIL-JavaScript-CSS
CSS-Tricks Screencast #134: A Tour of an In-Progress Site

CSS-Tricks Screencast #134: A Tour of an In-Progress Site

4 years ago
Built with Jekyll, Grunt, Sass, an SVG System, and More… Article link: css-tricks.com/video-screencasts/screencast-134-tour-site-progress-built-jekyll-grunt-sass-svg-system/

Custom icons with Iron Iconsets — Polycasts #22

3 years ago
Today we’re traveling back in time to update one of our old episodes. The iron-iconset-svg element lets you build your own custom icon sets which can be SUPER important if you want to make sure your site is as small and performant as possible. Demo source github.com/Polymer/polycasts/tree/master/ep22-update-iron-iconset-svg/app iron-iconset-svg docs elements.polymer-project.org/elements/iron-iconset-svg Behaviors — Polycasts #21 Iron […]
CSS-Tricks Screencast #113: Using a Custom Icon Font

CSS-Tricks Screencast #113: Using a Custom Icon Font

6 years ago
As we’ve said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than sprites because they are vector and so can scale to any size, be shadowed, change […]

Santa Tracker Developer Diary #7: SVGs

2 months ago
Learn about how Santa Tracker uses and optimizes its SVGs for display on your browser. For the online SVGO compression tool, learn more here: jakearchibald.github.io/svgomg/ github.com/google/santa-tracker-web santatracker.google.com Watch the rest of the series here: goo.gl/UD214n Subscribe to the Chrome Developers channel: goo.gl/LLLNvf

Using SVG’s as Icons

4 months ago
Icon Monster: iconmonstr.com/ Here’s font awesome: fontawesome.io/icons/ Follow me on social media: Twitter: twitter.com/QuentinWatt Facebook: www.facebook.com/quentinwatt Instagram: www.instagram.com/quentinwatt Snapchat: www.snapchat.com/add/quentinwatt92 Become a Patron: www.patreon.com/QuentinWatt Subscribe to my Vlog channel: www.youtube.com/c/Quentin Subscribe to this channel: www.youtube.com/c/QuentinWatt