Animating a gradient within an SVG element following along an SVG path

I successfully created an SVG egg and animated a path while adding a gradient, but I am facing an issue. The linear gradient goes from top to bottom, but I want the dark color at 0% and the light color at 100%. Essentially, I want the gradient to follow the existing path and get lighter as the percentage increases.

For reference, here is the link to my jsFiddle: http://jsfiddle.net/andyjh07/Lrywj95t/

If you need the SVG code, here it is:

<div id="stage">
    <div class="egg-holder">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 104.7 144.3" enable-background="new 0 0 104.7 144.3" xml:space="preserve">

            <defs>
                <linearGradient id="orangeGradient"
                                x1="0%" y1="0%"
                                x2="0%" y2="100%"
                                spreadMethod="pad">
                    <stop offset="0%"   stop-color="#ff9800" stop-opacity="1"/>
                    <stop offset="100%" stop-color="#e65100" stop-opacity="1"/>
                </linearGradient>
          </defs>

            <g id="egg-grey">
                <path fill="#FFFFFF" stroke="#212121" stroke-width="10" stroke-miterlimit="10" d="M99.3,92.2c0,25.7-20.8,46.5-46.5,46.5 S6.3,117.8,6.3,92.2S27.2,5.7,52.8,5.7S99.3,66.5,99.3,92.2z"/>
            </g>
            
            <g id="egg-orange">
                <path fill="none" stroke="url(#orangeGradient)" stroke-width="10" stroke-miterlimit="10" d="M99.3,92.2c0,25.7-20.8,46.5-46.5,46.5 S6.3,117.8,6.3,92.2S27.2,5.7,52.8,5.7S99.3,66.5,99.3,92.2z"/>
            </g>
          
        </svg>
        <div class="timer">
            <p></p>
        </div>
        
    </div>
</div>
javascriptcsssvg

Answer №1

It seems like you're looking to create a gradient along an SVG path.

While researching, I came across this particular thread which suggests that achieving this without segmenting the path may not be possible.

However, I also stumbled upon this useful resource, although the code provided is quite intricate, it appears to achieve the desired result.

Best of luck!

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

The issue with Postman Express.js Response Body not displaying any content is quite common

I've been struggling with this issue for a whole day and I just can't seem to find a solution. My node app is extremely simple. const express = require("express"); const port = 3001; const app = express(); app.use(express.json()); app.pos ...

javascriptnode.jsexpresspostman

Ensure the menu bar remains at the top of the page without using the position:

Check out this awesome fiddle here! My menu bar looks great at the top, but for some reason it won't stay in place when the user scrolls down. I've tried adding position:fixed to the CSS under the first #cssmenu, but it messes everything up. Her ...

htmlcss

Employing the CSS not selector within JavaScript

I am facing an issue where my form darkens with the screen every time I click a button to show it, using JavaScript. If I were using CSS, I know I could use the :not selector, but I need guidance on how to achieve this in JS. Can anyone assist me? Below i ...

javascripthtmlcss

A guide on implementing array properties in Vue 3

Currently learning the fundamentals, I have an array set up in the parent component (App.vue) data() { return { fruits: [ "apple", "pear", "cherry" ], }; }, I'm aiming to have three instances of the s ...

javascriptvue.js

Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this: https://i.sstatic.net/3fUNs.png I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" ...

htmlcsswhitespaceline-height

Is it possible for an image to be displayed in another div or table column when I hover my mouse over it?

I am looking to create an image gallery with thumbnails on the left side. When I hover over a thumbnail, I want the full image to be displayed in another section on the page. Can anyone provide me with the correct code or suggest a plugin to achieve this f ...

javascriptjqueryhtmlcssimage

What is the best way to convert a JSON object back into an object with its own set of methods?

Currently, I have a JavaScript object with multiple methods attached via prototype. When I serialize the object to JSON, only the property values are saved, which is expected. It wouldn't make sense to save the methods as well. Upon deserialization ...

javascriptjsonclasspersistence

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

javascriptjqueryhtmlcss

Accessing a service instance within the $rootScope.$on function in Angular

I'm looking for a way to access the service instance variable inside the $rootScope in the following code. myapp.service('myservice',function($rootScope) { this.var = false; $rootScope.$on('channel',function(e,msg) { v ...

javascripthtmlangularjs

Is the Javascript framework malfunctioning even though the code is identical to the one on jsfiddle

<html> <head> <meta charset="UTF-8"> <title>Interactive Globe Display using iTowns</title> <style> html { height: 100%; } body { margin: 0; overflow: hidden; ...

javascriptthree.js

Avoid overflow of a flex element within the <body> tag by ensuring its child with overflowing content takes up 100% of its width

I am facing an issue with my dashboard setup that includes a sidebar. I want the content area to have horizontal overflow scroll, but instead of that, it overflows its parent element. I experimented with flex and grid-template-columns values (1fr 5fr) with ...

css

Looking for assistance on how to access a JSON file in JavaScript without the need for servers

As I embark on my journey with JavaScript, a question has been lingering in my mind - is it possible to access a JSON file locally, without the need for servers like WAMP? My goal is to simply retrieve the data from a JSON file and display its contents o ...

javascriptjsonlocalhost

Allowing unauthorized cross-origin requests to reach the SailsJS controller despite implementing CORS restrictions

My cors.js file has the following configuration: module.exports.cors = { allRoutes: true, origin: require('./local.js').hosts, // which is 'http://localhost' } I decided to test it by making a request from a random site, Here is ...

javascriptnode.jscorssails.js

Tips for displaying JSON data by formatting it into separate div elements for the result object

Having recently started using the Amadeus REST API, I've been making AJAX calls to retrieve data. However, I'm facing a challenge when it comes to representing this data in a specific format and looping through it effectively. function showdataf ...

javascriptjqueryhtmljsonajax

javascript - Convert a string into a JSON object

Looking for assistance here as I am fairly new to this. My goal is to transform the fullName string returned from a webapp UI using Selenium WebDriverIO. Here's what I have: const fullName = "Mr Jason Biggs"; The desired outcome should be structured ...

javascriptjson

Deciding Between Two Columns or One Column for Your JQuery Accordion

I am currently working on customizing an Accordion that is too large in height for my liking. My goal is to convert the single column layout into a two-column display, side by side. Having multiple items in one column results in excessive height, hence t ...

jquerycss

The image remains unchanged in the JavaScript function

My attempt to swap images using jQuery has hit a snag. Upon running the page, it appears that the chase() method finishes executing before the animation has completed. The goal was to create an illusion of chasing between two images by repeatedly replaci ...

javascriptjqueryhtml

Tips for adjusting the font size of choices within the Material UI autocomplete component

Hey there, I'm currently working on a project using the Material Table and I'm looking to adjust the font size of the options in the Material UI Autocomplete. Any tips would be greatly appreciated! Thanks https://i.sstatic.net/ZM17w.png import R ...

javascriptreactjsmaterial-uifrontendmaterial-table

Increased space between the sidebar and the top bar

Currently, my code is a bit messy as I am still in the learning stages of bootstrap. I need some assistance on how to resolve the empty space that exists between the top and side bar elements. <!DOCTYPE html> <html lang="en"> <sty ...

htmlcsstwitter-bootstrap

What is the proper way to reference a property's value within another property of the same JavaScript Object?

Within a Gulp.js file (or any Javascript file), I have defined paths in a Javascript object: var paths = { devDir : 'builds/development/', devDirGlobs : this.devDir+'*.html' } I am attempting to reference the pro ...

javascriptobjectthis