Seamless Gradient Transition Effect on SVG Hover

I am facing an issue with the transition of a linear gradient in an SVG hover effect. The gradient itself is working fine, but I'm struggling to apply a smooth transition to my path.

PS: I would like to achieve this effect using only one path, without using a mask.

Thank you

path#grad1 { transition: 3s;}

svg {    
transition: 3s;
    width: 160px;
    max-height: 80px;
    margin-bottom: 20px;
}

svg .gradient { fill: url("#grad1");  }
svg:hover .gradient { fill: url("#grad2"); }
<a href="" target="">
    <svg viewBox="0 0 30 60">
        <path class="gradient" d="M6.93,59.16A1.36,1.36,0,0,1,6.35,59a1.38,1.38,0,0,1-.74-1.62L12.9,31.65H1.37A1.38,1.38,0,0,1,.29,29.43L22.8.53A1.36,1.36,0,0,1,24.5.15a1.37,1.37,0,0,1,.71,1.59L19.3,23.06H30a1.38,1.38,0,0,1,1.13,2.16L8.06,58.57A1.37,1.37,0,0,1,6.93,59.16ZM4.19,28.9H14.71a1.37,1.37,0,0,1,1.1.55,1.39,1.39,0,0,1,.23,1.2L10.51,50.2,27.37,25.81H17.49a1.37,1.37,0,0,1-1.09-.54,1.35,1.35,0,0,1-.23-1.2L20.71,7.69Z" />
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color: #07183d;  " />
                <stop offset="100%" style="stop-color: #07183d; " />
            </linearGradient>
        </defs>
        <defs>
            <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%" >
                <stop offset="0%" style="stop-color: #FE8301;  " />
                <stop offset="100%" style="stop-color: #003ec7;  " />
            </linearGradient>
        </defs>
    </svg>

</a>

htmlcsssvgtransition

Answer №1

What do you think of this code snippet?

path#grad1 { transition: 3s;}

svg {    
    width: 160px;
    max-height: 80px;
    margin-bottom: 20px;
}

svg .gradient1 { fill: url("#grad1");  }
svg .gradient2 { fill: url("#grad2"); }

svg use {
   transition: 3s;
   opacity: 0;
}

svg:hover use {
   opacity: 1;
}
<a href="" target="">
    <svg viewBox="0 0 30 60">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color: #07183d;  " />
                <stop offset="100%" style="stop-color: #07183d; " />
            </linearGradient>
            <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%" >
                <stop offset="0%" style="stop-color: #FE8301;  " />
                <stop offset="100%" style="stop-color: #003ec7;  " />
            </linearGradient>
        </defs>

        <g class="gradient1">
          <path id="shape" d="M6.93,59.16A1.36,1.36,0,0,1,6.35,59a1.38,1.38,0,0,1-.74-1.62L12.9,31.65H1.37A1.38,1.38,0,0,1,.29,29.43L22.8.53A1.36,1.36,0,0,1,24.5.15a1.37,1.37,0,0,1,.71,1.59L19.3,23.06H30a1.38,1.38,0,0,1,1.13,2.16L8.06,58.57A1.37,1.37,0,0,1,6.93,59.16ZM4.19,28.9H14.71a1.37,1.37,0,0,1,1.1.55,1.39,1.39,0,0,1,.23,1.2L10.51,50.2,27.37,25.81H17.49a1.37,1.37,0,0,1-1.09-.54,1.35,1.35,0,0,1-.23-1.2L20.71,7.69Z" />
        </g>
        <use xlink:href="#shape" class="gradient2"/>
    </svg>

</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to store selected items from a multi-select box in AngularJS that is generated using ng-repeat?

I have a scenario where I need to handle a group of select boxes instead of just one. Each select box holds a different option, and when the user changes their selection, I want to save that value in a variable or an array. I've managed to do this for ...

javascripthtmlarraysangularjs

What steps can I take to prevent Javascript/JQuery from repositioning other elements on the webpage?

Is there a way for the animation code to only affect the show/hide toggle buttons and not interfere with the other jQuery code I have implemented for hiding and showing div text? When I included the animate code in my js page, it caused issues with the exi ...

javascriptjqueryhtmlcss

Applying CSS to color the letters of a text, without needing to alter the HTML code

I'm just beginning to learn CSS and today I received a school assignment: Below is the HTML code provided: <head> <meta charset="UTF-8"> <title>ABC</title> <style> /* CSS section */ </style> ...

css

JavaScript script that parses innerHTML

Does the behavior of element.innerHTML = '<script>alert()</script>'; differ across browsers? Can I consistently expect innerHTML to not parse scripts? ...

javascripthtml

The alignment of inline divs is off and they are not forming a straight row

From my understanding, adding display:inline to divs with a relative position should align them (left to right) similar to float:left. I attempted both methods but with no success. Below is an example of my latest try with inline displaying. My goal is to ...

javascripthtmlcss

Is it possible to encounter the issue of "Context Lost" and "Importing multiple instances" in Three.js?

I am in the process of developing a 3D editor that allows users to manipulate a 3D scene and then view the result by pressing a "play" button. In order to display the output, I am utilizing an iframe. Below is the snippet of my HTML code: <iframe id=&qu ...

javascripthtmliframethree.js

Having trouble displaying a gray background/overlay in a Twitter Bootstrap modal design

Library version: Jquery 1.11.0 Framework version: Bootstrap 3.1.1 CodePen link: https://codepen.io/amitshahc/pen/r6ueupfj/1/ HTML snippet: <!-- Modal --> <div class="modal fade" id="az-progress" tabindex="-1" role="dialog" aria-labelledby= ...

jqueryhtmlcsstwitter-bootstrapbootstrap-modal

A guide on extracting text enclosed by <a> and </a> tags using regular expressions

I have come across the following code: <a align="center" href="http://google.com"><b>Google Link<b></b></a> <a align="center" href="http://yahoo.com"><strong>Yahoo Link</strong></a> Now, I am looking ...

javajavascripthtmlajaxregex

Seeking guidance on implementing toggle buttons for navigation bar items on mobile screens, enabling them to toggle for a dropdown menu. The tools at my disposal are HTML, CSS

I want to make the navigation menu responsive by adding a toggle button for the dropdown menu on mobile screens. Here is the code snippet: .nav-link { display: inline-block; position: relative; color: black; } html,body{ height: 100%; width ...

javascripthtmlcssbootstrap-4responsive-design

Tips for converting a styled MS-Access report to HTML with a template document

I am having trouble formatting my MS Access report using an HTML template. After doing some research, I discovered the following tags and tokens for MS Access HTML templates: <!--AccessTemplate_Body--> <!--AccessTemplate_FirstPage--> ...

htmlms-accessbootstrap-4

Creating sequential hover animations with CSS in HTML

I have a total of four divs that I want to hover continuously, one after the other. Here is the code I am currently using: #rij1 .content-overlayz, #rij1 .content-details { animation-duration: 2s; animation-name: stepped-pulse; animation-iterati ...

javascripthtmlcssanimationhover

Eliminate unnecessary space from a Bootstrap 4 Card

Using the Card class from Bootstrap 4, I'm struggling with an extra space on the right side: https://i.sstatic.net/5qb8y.png (Please ignore the 'porno' thing, haha). You can clearly see the extra space on the right. I've been attemp ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Combine the click event and onkeydown event within a single function

I have a function that sends a message when the Enter key is pressed. However, I also created a button to send a message, but when I call this function, the message doesn't send, even though I added a click event. function inputKeyDown(event, input ...

javascripthtmlevents

Boosting the specificity of Material UI override styles

I came across a question about Material UI Overriding styles with increased specificity that seemed related to my issue, but I couldn't apply the solution to my problem. My problem involves a vertical Slider with marks, and I am trying to remove the ...

cssreactjsmaterial-ui

Ways to prevent an element from displaying a hover border or outline

I need help with styling a group of 50% width elements that are displayed next to each other. I want to add a 20px white border around each element to create a separation between them. This is necessary because I have a responsive layout and always require ...

htmlcss

Is there a way to successfully implement this CSS animation utilizing background images in a Markdown document?

I am attempting to create a dynamic animation on a <canvas> element by changing the background image using the @keyframes rule in CSS. Unfortunately, I am facing difficulty getting the animation to work. The <canvas> tag does not even display a ...

htmlimagecanvasmarkdowncss-animations

Creating an Instagram-style frame effect for your HTML page using CSS

https://i.sstatic.net/SnkO7.jpg Trying to figure out how to align images like in the picture above. Here's the code I've been working with: <html> <head> <style> .main { width: 634px; height: 634px; } .img1 { width ...

htmlcssimage

CSS with a "true" space for a fixed element (ensuring the previous element does not overlap with the current fixed element)

I am facing an issue with the layout of my webpage. I have two horizontal columns - the left one is fixed, along with a bottom footer that is below the second content column. When I add a border to the content column, it extends all the way down to the fo ...

cssfixedspaceoverlap

Exploring and Modifying CSS Styles in Element Properties

Struggling to remove a 50px gap on my website. It's built on Joomla 1.5 and the white space is highlighted in orange below. When I inspect element using Chrome, it shows a margin-bottom: 50px but doesn't specify the location. Any tips on how to ...

htmlcss

Creating an HTML table layout: A step-by-step guide

I am in need of assistance with designing an HTML layout. My goal is to display 3 columns for each table row as described below: Column #1 will contain text only. Column #2 will have an inner table, which may consist of 1 or 2 rows depending on the cont ...

htmlcss