I have designed an intricate SVG animation for my background and paired it with text. For reference, please refer to this jsFiddle link.
HTML:
<div class="content">
<!-- Background SVG -->
<svg width="1500" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="background-svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Background</title>
<path fill="#fefefe" stroke="#000000" stroke-width="5" d=" m498.33967,-113.03246c99.6527,78.64871 -127.11402,258.15614 -190.68809,236.79926c-63.57406,-21.35688 -114.68809,-306.16174 -46.65269,-211.12362c68.0354,95.03812 137.68808,-104.32435 237.34078,-25.67564z" id="shap" stroke-opacity="0" fill-opacity="0.9" />
</g>
</svg>
<!-- /Background SVG -->
<div class="container">
<!-- Intro -->
<div id="intro">
<p >Text</p>
<h1 ><strong>Title Here</strong></h1>
</div>
<!-- /Intro -->
</div>
</div>
</pre>
<p><strong>CSS</strong></p>
<pre><code>.content {
color: #fff;
background-color: #f857a6;
position: fixed;
top: 0;
height: 100%;
width: 100%;
}
.background-svg {
position: absolute;
z-index: -4;
width: 100%;
height: 100%;
}
.background-svg path {
-webkit-animation: svgAnimate 20s infinite alternate linear;
animation: svgAnimate 20s infinite alternate linear;
}
@-webkit-keyframes svgAnimate {
to {
d: path("m276.33967,389.03246c130.6527,-65.35129 -20.11402,367.15614 -190.68809,236.79926c-170.57407,-130.35688 -161.68809,-159.16174 -46.65269,-211.12362c115.0354,-51.96188 106.68808,39.67565 237.34078,-25.67564z");
}
}
@keyframes svgAnimate {
to {
d: path("m276.33967,389.03246c130.6527,-65.35129 -20.11402,367.15614 -190.68809,236.79926c-170.57407,-130.35688 -161.68809,-159.16174 -46.65269,-211.12362c115.0354,-51.96188 106.68808,39.67565 237.34078,-25.67564z");
}
}
/*====================*/
/* Intro Div */
#intro {
border-radius: 20px;
padding: 60px;
height: 500px;
position: relative;
margin-top: 7%;
}
.name {
font-family: 'Raleway', sans-serif;
font-weight: 900;
}
/*====================*/
I would like to modify the text color in sync with the animation's movements, reverting to the default color when it transitions out.
Can anyone assist me with this?
Thank you in advance
Update:
Resolved using another example: https://codepen.io/norhan22/pen/jwJvxw?editors=1100