I have implemented a basic animated gradient on text using pure CSS (and some extra DOM elements), as seen here:
.container {
position: relative;
display: block;
width: 300px;
height: 300px;
font-size: 60px;
}
.base {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: red;
background: linear-gradient(315deg, red 0%, green 74%);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 2s linear infinite;
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.overlay:hover {
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
@keyframes shine {
to {
background-position: 200% center;
}
}<span class="container">
<span class="base">a</span>
<span class="overlay">a</span>
</span>I tried replacing the parts with SVG and using the CSS background-clip property, but it doesn't seem to do anything on SVGs. How can I do this same text gradient effect on SVGs (on hover)?
The SVG I have is a complex hand-drawn owl exported as SVG (looks like a sketch), so it uses lots of complex paths.
Ideally this could be done on a CSS-loaded SVG, rather than using something like this.