You Need This Hover Effect on Your SVGs ASAP (ReactJS / TailwindCSS)
HTML-код
- Опубликовано: 2 июн 2024
- Watch as I show you how you can add a hover gradient to your SVGs, as seen on the Supabase landing page
Follow me on Twitter: / rithmio
⏳ Timestamps
00:00 - What we will build
02:00 - Adding in content
05:38 - The Hover Gradient
👨💻 Looking for a web developer job, visit: www.webdevjobs.io/
👽 Discord - / discord
👾 Code - github.com/sixfwa/svg-gradien...
#reactjs #webdevelopment #svg
![Darren Waller - Who Knew (Her Perspective) [Official Video]](http://i.ytimg.com/vi/GytDjB8u6bM/mqdefault.jpg)
You can find me on Twitter / X: twitter.com/rithmio
I'm calling it now, this channel is gonna blow up. Quality content.
Woah! Thank you!
I just saw this one video and I agree 💯
Just a small remark - saving high velocity data into state, such as cursor position, will result in rather unpleasant performance because of the constant barrage or re-renders whenever you move your cursor. I personally would go with either setting those SVG attributes directly via JS in handleMouseMove or I’d use Framer Motion. Also getBoundingClientRect is kinda expensive and doing it in a mouse move handler will slow the whole thing down considerably. It’d be better to cache it (in a ref for example) and use it from there, since it doesn’t change that often…if ever.
agreed
This tutorial is GOLD. Thank you for sharing. 🍻
Glad you found it useful :)
This channel is a national treasure fr, good & quality content
Appreciate those word
Amazing, i have been wanting to do this effect for a while, thanks
love it! thank you for this
You're so welcome!
Very nice ! Thanks for sharing !
Thanks for watching!
AMAZING KEEP GOING BUDDY
Thank you for the support!
Wow, simple and beauty! thx!
Glad you like it!
Would be nice if there was a constant preview of the browser window next to the code as you're adding classes, so it's easier to remember what which class does
Will be trying this in future videos
Thx for the share you gain one more subscriber. Great quality content.
Thanks for the sub! Appreciate that a lot
Masterclass 👏
I usually don't find youtube content useful, at all.. Buut.. This was very informative and straight to the point, it gets a thumbs up from me, well done!
Im really glad this was of use. Thanks for the comment!
Love the video ❤😍😘
Thank you!
Really cool!
Absolutely gorgeous 🥰
Thank you!
You just got a new follower
Thank you!
I've been wanting to share what I've learned through RUclips videos too but never find the courage to do so.
What did motivate you to post videos like this one? You make it look easy, great job!
This was very informative and enjoyable 👍🏻
Hey brother please start a series on Three js you are amazing on that ❤🎉
Jeeez the quality
Thanks! Trying to improve with each video
This could be great for bento box gradient borders. Just create svgs wrappers with composed children inside. I think it's just a bit of calculating for it to be dynamic size
I smell a new web design trend
How did you even edit this video, and what program did you use for it? Looks crazy good bro. Also, very interesting video!
Thank you! I used Premiere Pro
Finally some good knowledge using tailwind
Thanks for the video it's great .... i was trying to replicate also the effect on the 'supabase' website in the "edge function" card the effect that look like an electricity passed or something ... i also see it in vercel website it's so nice but i think i should learn more on animation and svg before i can make it
which extension do you use for that equal sign and arrow sign??
Ok, thanks a lot. Now, how do I build it in plain JS?
Really cool! Would be nice if you shared the code in a repo or something
Thanks man, lol yeah will be adding it!
Great, thank you!
It's there mate :)
Great!
good tuto brother , but i have a question : how do i deal with big svg in nextjs
Thank you! The same way, however I would keep an eye out on the viewbox property with SVGs etc. You may have to play around with some values, however the principle shown in this vid would be the same
This is a great effect and code explanation but I can’t help but feel it is a messy mix of techs and concerns.
I think taking Tailwind out of the equation could clear things up. Ditto for using pure JS instead of react states.
(Ex. You could activate the svg border with a :hover pseudo-class)
Still. Hella cool.
I should have stated, i think supabase also uses tailwind on their landing page. But thank you :)
@@iamrithmic Well then it looks like I gotta have a talk with someone at Supabase 😁
That's the nature of Dev - plenty of ways to do the same thing.
(Plus I will always admit to disliking Tailwind)
I'll have to find, I think Kevin Powell did something like this in pure CSS maybe🤔. To be continued...
Thanks again for great work and inspiration.
How come that I never discovered your channel before?
what theme do you use in your VSCode ?
Look like material ocean dark (material community theme)
Correct :)
you should see Vercel's 2024 annual conference page...!!!!
A thing of beauty
Here's what I'd change:
1.) This is just semantic, but I'd change the interface of the Flame component to be more agnostic about what is determining where it draws the gradient. Sure, it could be the cursor, but it could also be animated for another reason. Just have it accept gradientCenterX and gradientCenterY rather than implying it should have to do with cursor. Likewise, rather than accepting mouseOnCard prop, which makes it now have assumptions about its parent and where the Flame component will be used, it'd make more sense to just have it have a prop called showGradient
2.) Rather than having gradientCenter/setGradientCenter and the accompanying useEffect inside of Flame, if there's a calculation like that that you need to do, just replace both with a useMemo.
relatively new in this field and kinda confused of memoization stuff, but what's the point of memoization of the result when cause of animation keeps on changing and so does the input to calculations?
@@varunchakraborty6020 He's currently running it in a useEffect hook which is also reacting to the changed input. useMemo is just taking his useState/useEffect and combining them to a more semantically correct representation of his goal. With regards to why you'd memoize in the first place, you're right that the input here will change frequently enough such that many of these cases in which it would be memoized will trigger a rerun for a changed input, but there are plenty of times which react might call a re-render with the input having been unchanged. For example, as a user is typing something, they're not moving the cursor but the renders are happening, this memoization would hold in those cases. React also often renders a few times while squaring away its render state with some other underlying state, and those redundant renders need not recalculate the effect, as the cursor will also have the same position in those cases. But in general, I'd say your intuition is on the right track.
vight innit 😭
😂 forever conscious of this. was just waiting for someone to pick this up
It's pronounced "veet"! :) Nice video!
🤦♂️
hmm... it possibly do same effect on text overlay?
fajne
Amazing
Sweet baby Jesus, you missed the NSFW tag here mate, this is too sexy 🔥
Thank you so much for sharing!
Haha thank you! Glad you found it useful :)
can i applied on card or something semilair to png .. etc
Would have to be an SVG
What is the Name of the code theme?
How do you know all this code out of your head dang
Why does this feel like Hyperflex's style
My favourite RUclips channel. A lot of inspiration from him
"Too smooth" means "so smooth its a bad thing".
Ezsnippet army like 👍
i find this very complicated, dev is hard for me :(
Why use that @apply instead of just using class name? If you want that as a component, just do a component, not a class with @apply. It’s counterintuitive and not recommended by tailwind.
Reusable className
@@muslehuddin8847 not the case here, it's used literally once. Also, if in the future you need it to be reusable, just do a component, it'll be exactly that ;)
@@muslehuddin8847 which tailwind doesnt suggests and warns you to not to do that because whole point of tailwind is to get rid of class names.
neat way to do so, but being real i feel like this is massively over coded.
i would so something like (skipping most of the verbosity of code just to make it more concise):
div: id=followMouse h=25%, w=25% clip:svgOutline
then just have a js loop that lerps the xy of the mouse. this way you can also just apply it to every and any element on the page.
.
Goodness. Tailwind is one of the worst things to happen to CSS. With the tag spaghetti. Any proper css way to achieve this?
too many states, too many use effects bro. also you use a ref. you dont need to use that many hooks. you also pass them as props. dont do that. just use a single state with single event listener. you do too much calculation on that function.
also you hold cursor x y state in root component which it will rerender each time you move the mouse, it will rerender the whole application, not ideal sorry.
It's clear that you just finished your first React tutorial. Leave the heavy lifting to the big boys.😂
@@rollotomasi1832 I think its just 4th year of me with typescript & react bro
Would have been better without React or Tailwind.
why?
why? care to explain?
Because if this tutorial was done using native JS and CSS it would be useful to anyone regardless of the frameworks they do or do not use.
@Bodom1978 is there something wrong with using them? im actually curious because i thought react, tailwind, etc are solid frameworks and they make it easier to create things. also they have more features
There is nothing wrong with using them, I use them a lot, but I also have many projects that do not. A tutorial with native JS and CSS would be easily ported to any framework. But the other way around limits it to only React and Tailwind.
10:40 let's take a moment to appreciate how useless typescript is in general
Somewhat reminds me of @Hyperplexed. Straigt up to the point and visually pleasing. Great stuff no pressure just keep doing your thing
One of my biggest inspirations on YT. Comment means a lot!