Hello everyone! This is my debut post, and usually I can find solutions by browsing the community. However, this time I am in need of some assistance. I have crafted an "SVG" file that includes animations depicting the different cycles of a day over a 24-hour period. I have managed to utilize NPM bundles for calculating the time cycles and determining the duration of each "time period" between the SVG gradients.
The snippet of code looks like this:
<linearGradient
id="skyGradient"
gradientTransform="rotate(90)"
>
<stop offset="50%">
<animate
attributeName="stop-color"
begin="39420s"
keyTimes="0;0.19517361111111112;0.21341435185185184;0.23157407407407407;0.2471875;0.2479398148148148;0.4997337962962963;0.7515277777777778;0.7522800925925925;0.7678935185185185;0.7860648148148148;0.8043055555555556;1"
values="black;rgb(0,0,0);rgb(2,15,23);rgb(8,33,48);rgb(46,125,185);rgb(145,193,243);rgb(145,193,243);rgb(46,125,185);rgb(46,125,185);rgb(24,75,106);rgb(10,41,59);rgb(2,15,23);black"
calcMode="linear"
dur="86400s">
</animate>
</stop>
</linearGradient>
This is just a portion of the SVG linearGradient, with two more similar sections following the same code structure.
Code available here: https://jsfiddle.net/2148whup/
What do I expect from this setup?
When a visitor lands on the page, I am aware of the current time in seconds of their specific location's day. For instance, if it's June 17, 2023, at 9:30 am EDT, I can calculate the total seconds elapsed since midnight and determine the corresponding percentage where the animation should ideally start based on keyTimes and progress until completion (if the user stays on the site throughout the day). Despite going through https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate thoroughly, I'm encountering difficulties rendering the animation, even after manual adjustments to the generated code.
In my "test" code, I've tried using color codes in RGB or Hex formats but without success. Once I manage to resolve this issue, I plan to work on implementing JavaScript to automatically update/regenerate keyTimes for another 24-hour loop cycle if necessary.