Videos

Using SVG’s as Icons

1 month 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

WAPG 6 SVG Animation Programming SMIL JavaScript CSS

5 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
Sarah Drasner: Functional Animation – CSSConf.Asia 2016

Sarah Drasner: Functional Animation – CSSConf.Asia 2016

12 months ago
Animation is captivating. Our brains are trained to respond most intently to movement. For this reason, animation in a user experience is extremely important, and also very easy to overdo. Carefully considered animation can compose spatial maps to guide users. Animations can be responsive, resolution-independent, and make a site function intuitively. In this session Sarah […]
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
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 […]

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 is SVG?

2 years ago

You, Me & SVG course jingle

2 years ago
Are you excited for our You, Me & SVG course? Get a quick look at the course now by watching the jingle!

CSSconf EU 2015 | Lea Verou: The Missing Slice

2 years ago
Think of the humble pie chart. Simple and ubiquitous, yet surprisingly difficult to create with Web technologies in a flexible, maintainable way. Faced with this simple goal, Lea will take you on a colorful interactive journey through several aspects of CSS and SVG and will sweep you off your feet with clever ways to use […]

Custom icons with Iron Iconsets — Polycasts #22

2 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 […]

What Deep Dream sees — LazyWeb #12

2 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