The many ways to change an SVG fill on hover
How do you go about adding a colored hover effect to an icon if it’s not an inline SVG? Let’s dive into what’s possible with CSS and SVG filters.
Skills.
My toolbox & things I can do:
HTML5
CSS3
JavaScript
Python
React
Node
Docker
Swift
AWS
Firebase
VS Code
Terminal
Projects.
Some things that I've coded or contributed to:
-
Gl1tchyAI, an AI powered Chatbot
-
Aurora animated text effect
-
Project Management Dashboard UI Design
-
Forest Website Landing Page
-
Parallax Scroll Animation
-
Rotating Globe Animation in ASCII style
-
Controllable Clock
-
Pizza Loading Animation
-
Log In / Sign Up Page UI Design
-
Credit / Debit Card Info Page UI Design
Writing.
Motion Paths – Past, Present and Future
The ability to animate along a motion path is a really useful thing to have in your SVG animation toolkit. Let's explore a few ways to achieve this.
Creating my logo animation.
Using GSAP animation library and CSS clip paths to make a playful animated logo.
Speaking.
The first time I got asked to speak at a Gaming conference, my gut reaction was “heck no. That sounds terrifying”.
So naturally I said yes. Since then I’ve spoken at conferences and meet-ups all over New Delhi. It still terrifies me.
Check out my blogs.
talk
Getting started with SVG animation
Animation is one of the best ways to bring brand personality and character to an online experience, but in the busy world of front-end development, it can often be overlooked.
In this workshop we cover everything you need to know to get started with, and master SVG animation.
talk
Painting with SVG
SVG's a great format for creating illustrative graphics on the web, but it can sometimes feel a bit... flat?
Illustration in the real-world is gloriously messy. It's full of texture, human error, smudges, and paint splatters. In this talk we take a look at how we can use different SVG techniques to recreate some tactile 'messiness'
talk
Interactive web animation with SVG
Have you ever felt uninspired by the every-day grind?
Like coding is all work and no play? Me too.
In this talk I explain how playing with SVG helped me explore some fun new browser API's. I give some advice on how to get started, share some demos and advise on when to reach for an animation library.
Oh, and there's neopets in it.
talk
Limitation breeds creativity
Constraints might not feel like what you need when you're trying to be creative. But working within constraints can help you get started and provide unconventional ways around a problem.
In this talk I chat about how to get over the fear of a blank page, and show off some fun CSS only demos.