Animated light reflection on image in Css or Jquery - javascript

Take a look at below image:
I need to animate white light reflection on image to go in from right side and go out from the left side of the image.
I did some effect with SVG on it like this:
<div class="wrapper_1">
<img src="../images/stone.png"/>
<svg width="1600" height="600" viewBox="0 0 1600 600">
<filter id="demo1">
<feGaussianBlur stdDeviation="3" result="blur4"/>
<!--Lighting effect-->
<feSpecularLighting result="spec4" in="blur4" specularExponent="35" lighting-color="#cccccc">
<!--Light source effect-->
<fePointLight x="75" y="100" z="200">
<!--Lighting Animation-->
<animate attributeName="x" values="75;320;75" dur="10s" repeatCount="indefinite"/>
</fePointLight>
</feSpecularLighting>
<!--Composition of inputs-->
<feComposite in="SourceGraphic" in2="spec4" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
<filter id="demo2">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur5"/>
<!--Composition of inputs-->
<feComposite in="SourceGraphic" in2="blur5" operator="arithmetic" k1="0" k2="3" k3="3" k4="0"/>
</filter>
<!--Apple tree graphic-->
<g class="tree" filter="url(#demo4)">
<g>
<line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1383" y1="1088" x2="1173" y2="967" id="svg_35"/>
<path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_36"/>
<line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1442" y1="1054" x2="1001" y2="852" id="svg_39"/>
<path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_41"/>
</g>
<g display="inline">
<line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1383" y1="1088" x2="1173" y2="967" id="svg_28"/>
<path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_29"/>
<path fill="none" stroke="" stroke-linejoin="null" stroke-linecap="round" d="m274.31702,193.091c9.00897,-18.4798 14.82697,11.772 13.758,9.87198l12.98898,-18.55298" transform="rotate(50, 287.689, 193.73)" id=""/>
<line fill="none" stroke-linejoin="null" stroke-linecap="square" x1="1442" y1="1054" x2="1001" y2="852" id="svg_32"/>
<path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-round="square" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_34"/>
</g>
</g>
</svg>
but that did not worke. Actually tried with SVG but I looking for CSS or Jquery
way.so any one can help?!

You can do this with a pseudo element that has a linear-gradient as a background with an animation that moves it across the image.
div {
display: inline-block;
position: relative;
}
div:after {
content: "";
position: absolute;
top: -30%;
right: -200%;
width: 50%;
height: 200%;
opacity: 0;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
animation: shine 2s 1s;
}
#keyframes shine {
to {
opacity: 1;
right: 210%;
}
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

Related

How to draw donut chart with rounded corners and different gradients and shadows in every section?

I have to draw a donut chart like that on my website using sample data categories = [30,32,58,62].
As you can see, there's radial gradient for every section. I've tried to use d3 library for that, but I only could get the gradient which starts at the center of my figure but not from the center of every section.
There's also a box-shadow inside every section. How can I do that?
Applied styles for the figure are listed below:
Distance between different sections is 1%
border-radius: 6px;
CSS
background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(255, 184, 0, 0.56) 81.25%, rgba(255, 239, 153, 0.32) 100%);
box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(255, 176, 57, 0.9);
background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(191, 191, 191, 0.345) 82.81%, rgba(228, 228, 228, 0.1) 92.19%);
box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(131, 131, 131, 0.6);
background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(166, 166, 166, 0.1725) 82.81%, rgba(203, 203, 203, 0.05) 92.19%);
box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(105, 105, 105, 0.2);
background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(255, 184, 0, 0.24) 81.25%, rgba(255, 239, 153, 0.12) 100%);
box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(255, 176, 57, 0.4);
In order for each segment to be independent to accept its own gradient and later could be used as a separate reference, instead of one circle we will use four circles, since there are 4 sectors in the diagram.
On each circle, only one sector will be displayed, and through the gaps, the second circle with its own one sector will be visible, etc.
#1. An example of a circle with one sector:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" style="border:1px solid" >
<circle id="s2" transform="rotate(-120 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FAE094" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
<polyline points="200,0 200,400" fill="none" stroke="black" />
<polyline points="0,200 400,200" fill="none" stroke="black" />
</svg>
#2. Add the rest of the circles with their sectors
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" style="border:1px solid" >
<circle id="s1" transform="rotate(-120 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FAE094" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
<circle id="s2" transform="rotate(-58 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FCF0D0" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
<circle id="s3" transform="rotate(5 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="335, 670" />
<circle id="s4" transform="rotate(137 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="296, 695" />
<polyline points="200,0 200,400" fill="none" stroke="black" />
<polyline points="0,200 400,200" fill="none" stroke="black" />
</svg>
#3. Making rounded corners of the sectors
For this we use SVG filter:
Used a trick from the answer. Thanks #Temani Afif
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
<style>
circle{
filter:url(#goo);
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" style="border:1px solid" >
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<circle id="s1" transform="rotate(-120 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FAE094" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
<circle id="s2" transform="rotate(-58 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FCF0D0" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
<circle id="s3" transform="rotate(5 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="335, 670" />
<circle id="s4" transform="rotate(137 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="296, 695" />
</svg>
#4. Adding radial gradients
Each sector has its own gradient:
circle{
filter:url(#goo);
}
#s1 {
stroke:url(#rg1);
}
#s2 {
stroke:url(#rg2);
}
#s3 {
stroke:url(#rg3);
}
#s4 {
stroke:url(#rg4);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" >
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
<radialGradient id="rg1" r="1" fx="0.6" fy="0.5">
<stop offset="40%" stop-color="#F6BD4A"></stop>
<stop offset="50%" stop-color="#F6DFB2"></stop>
<stop offset="70%" stop-color="white"></stop>
<stop offset="90%" stop-color="#F6AC17"></stop>
</radialGradient>
<radialGradient id="rg2" r="1" fx="0.4" fy="0.5">
<stop offset="40%" stop-color="#F6BD4A"></stop>
<stop offset="50%" stop-color="#F6DFB2"></stop>
<stop offset="70%" stop-color="white"></stop>
<stop offset="90%" stop-color="#F6AC17"></stop>
</radialGradient>
<radialGradient id="rg3" r="1" fx="0.5" fy="0.5">
<stop offset="40%" stop-color="#DCDCDC"></stop>
<stop offset="50%" stop-color="#FFFFFF"></stop>
<stop offset="60%" stop-color="#CDCDCD"></stop>
<stop offset="90%" stop-color="#CDCDCD"></stop>
</radialGradient>
<radialGradient id="rg4" r="1" fx="0.5" fy="0.5">
<stop offset="40%" stop-color="#DCDCDC"></stop>
<stop offset="50%" stop-color="#F3F3F3"></stop>
<stop offset="60%" stop-color="#B8B8B8"></stop>
<stop offset="90%" stop-color="#B8B8B8"></stop>
</radialGradient>
</defs>
<circle id="s1" transform="rotate(-120 200 200)" cx="200" cy="200" r="160" fill="none" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
<circle id="s2" transform="rotate(-58 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FCF0D0" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
<circle id="s3" transform="rotate(5 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="335, 670" />
<circle id="s4" transform="rotate(137 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="296, 695" />
</svg>

Svg which uses greensock to convert it only with css use

I'm trying to understand if it is how it can be possible to convert the animations of the following svg that greensock uses, using only the css code.
In the following example, I don't know why, only the animation of the browser and scrollbar seems to work, which scroll.
That of the terminal that opens and the code that you write on your own doesn't seem to work.
So the question is would it be possible to convert the following example which uses animations only using css.
Can you give me some suggestions?
(function() {
let illustration = document.querySelector('.Illustration');
if (!illustration) {
return;
}
const computer = gsap.timeline({
scrollTrigger: {
trigger: '.Illustration',
toggleActions: 'play none none none',
end: '+=10' // end after scrolling 500px beyond the start
}
});
computer
.to(
'#cursor',
{
repeat: 20,
keyframes: [
{
opacity: 0,
duration: 0.01,
delay: 0.4
},
{
opacity: 1,
duration: 0.01,
delay: 0.4
}
]
},
0
)
.from(
'.line',
{
scaleX: 0,
ease: Sine.easeOut,
stagger: {
duration: 3,
amount: 3
}
},
0
)
.to(
'#website',
{
ease: Sine.easeInOut,
yPercent: -60,
duration: 4
},
1
)
.to(
'#scrollbar',
{
ease: Sine.easeInOut,
yPercent: 260,
duration: 4
},
1
)
.to(
'#iterm',
{
opacity: 1,
delay: -0.1,
duration: 0.01
},
2
)
.from(
'#iterm',
{
ease: Elastic.easeOut.config(0.17, 0.2),
transformOrigin: '50% 50%',
y: 60,
x: -20,
duration: 1,
scale: 0
},
2
)
.fromTo(
'.steam',
{
opacity: 1,
drawSVG: '0%'
},
{
drawSVG: '100%',
duration: 3,
stagger: {
each: 0.5
}
},
2
)
.to(
'.steam',
{
opacity: 0,
duration: 4,
stagger: {
each: 0.5
}
},
3
);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://pastebin.com/raw/ywciu18p"></script>
<script src="https://pastebin.com/raw/u7GLGbfu"></script>
<svg
xmlns="http://www.w3.org/2000/svg" class="Illustration Hero__svg" preserveAspectRatio="xMinYMin meet" viewBox="120 200 300 288" width="300px" height="288px">
<defs>
<clipPath id="clippy">
<rect x="133.98" y="248.2" width="52.38" height="81.84" fill="none"></rect>
</clipPath>
<clipPath id="screen">
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="none"></rect>
</clipPath>
</defs>
<g style="isolation:isolate">
<g id="_1" data-name="1">
<rect id="shelf" x="10.16" y="266.81" width="99.83" height="4.23" fill="#404040"></rect>
<rect id="desk" x="37.83" y="380.3" width="282" height="10" rx="5" fill="#404040"></rect>
<g id="coffee">
<path d="M90.8 362a.87.87 0 01-1.74 0 2.14 2.14 0 00-.27-.89 3.33 3.33 0 00-.91-1.11 1.87 1.87 0 00-1.16-.41 1.79 1.79 0 00-.72.2l-.16.09a2.23 2.23 0 00-1 1.61 4.56 4.56 0 00.58 2.75c.08.16.18.34.29.52a17.28 17.28 0 002.71 3c1.79 1.72 3.65 3.51 4.2 6a.87.87 0 11-1.69.38c-.44-1.95-2.11-3.55-3.71-5.1a18.07 18.07 0 01-3-3.38c-.12-.2-.24-.41-.35-.63a6.31 6.31 0 01-.75-3.82 4 4 0 011.85-2.83l.28-.15a3.5 3.5 0 011.46-.39 3.6 3.6 0 012.25.76 5 5 0 011.41 1.71 4 4 0 01.43 1.69z" fill="#cc7d96"></path>
<path d="M107.54 356.89c.08 4.69-1.07 19.42-4.84 23.22h-8.08c-3.77-3.8-4.92-18.53-4.84-23.22z" fill="#dd859c" fill-rule="evenodd"></path>
<path opacity="0" class="steam" d="M99.48,350.34c-.56-.56-3-3.52,0-6.2s1.93-3.76.11-6.19" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4006; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M103.68,354.83c-.56-.56-3-3.52,0-6.19s1.93-3.76.11-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4011; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M93.57,354.83c-.57-.56-3-3.52,0-6.19s1.92-3.76.1-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 15.4049; stroke-dasharray: 0px, 999999px;"></path>
</g>
<g id="pc">
<polygon points="238.13 377.72 235.66 361.98 205.21 361.98 202.74 377.72 238.13 377.72" fill="#d2cfd6"></polygon>
<path d="M124.59 363.8a3.31 3.31 0 01-3.3-3.31v-18.76h198.29v18.76a3.32 3.32 0 01-3.31 3.31z" fill="#fff"></path>
<path d="M319.33 342v18.51a3.06 3.06 0 01-3.06 3.06H124.59a3.06 3.06 0 01-3-3.06V342h197.74m.5-.5H121v19a3.56 3.56 0 003.55 3.56h191.72a3.56 3.56 0 003.56-3.56v-19z" fill="#404040"></path>
<path d="M314.36 234.24H126.51a5.45 5.45 0 00-5.47 5.43v103.2h198.79v-103.2a5.45 5.45 0 00-5.47-5.43z" fill="#404040"></path>
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="#e3d1e5"></rect>
<rect x="188.3" y="377.72" width="64.27" height="2.36" fill="#eaeaea"></rect>
<ellipse cx="220.43" cy="353.63" rx="3.84" ry="3.81" fill="#333"></ellipse>
<g clip-path="url(#screen)">
<g id="vs-code">
<rect x="193.2" y="240.73" width="119.55" height="95.74" fill="#565266"></rect>
<rect x="193.2" y="240.73" width="119.55" height="6.45" fill="#b0baea"></rect>
<ellipse cx="198.98" cy="243.95" rx="1.4" ry="1.38" fill="#e84d4d"></ellipse>
<ellipse cx="204.19" cy="243.95" rx="1.4" ry="1.38" fill="#f2dd77"></ellipse>
<ellipse cx="209.14" cy="243.95" rx="1.4" ry="1.38" fill="#4eb785"></ellipse>
<g fill="#706d84">
<path d="M200.08 252.61c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.13 253.24l-.07-.61c1-.7 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.72c1.63 0 2.11.46 2.11 1s-.5 1.14-1.32 1.76h1.39v.67zM200.08 259.26c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54V258l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203.13 259.89l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1s-.5 1.15-1.32 1.77h1.39v.67zM200.08 265.91c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM205.23 266v.59h-.73V266h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.13l.73-.08v1.16h.37l-.07.67zM200.08 272.56c1.17-.08 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.13zM203.17 273.27v-.72c1.17-.09 1.53-.2 1.53-.49s-.39-.42-1.44-.54l.11-1.77h2l-.06.69H204v.59c1.11.17 1.44.56 1.44 1-.04.63-.7 1.15-2.27 1.24zM200.08 279.2c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.05-2.21 1.13zM203 278.55c0-1 .56-1.73 1.83-2.27l.32.65c-.84.31-1.19.61-1.33 1 .78-.45 1.67-.08 1.67.8a1.25 1.25 0 11-2.49-.17zm1.76.23c0-.48-.41-.67-1-.4v.09c0 .59.25.83.56.83s.44-.17.44-.52zM200.08 285.85c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.39 286.45a13.46 13.46 0 011.31-2.67h-1.6l.06-.7h2.33v.68a14.72 14.72 0 00-1.3 2.8zM200.08 292.5c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203 292.33a.92.92 0 00.05-1.74c0-.48.42-1 1.22-1 .63 0 1.13.33 1.13.84a1 1 0 01-.61.86c.36.21.68.47.68.89s-.49 1-1.3 1-1.17-.32-1.17-.85zm1.71 0c0-.25-.32-.44-.68-.64a.67.67 0 00-.29.52c0 .25.15.44.5.44s.48-.17.48-.35zm-.32-1.21a.63.63 0 00.27-.48c0-.23-.12-.4-.44-.4s-.42.14-.42.29.28.39.6.56zM200.08 299.15c1.17-.07 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.14zM203.33 299.25c.84-.32 1.19-.61 1.33-1-.78.44-1.67.08-1.67-.8a1.25 1.25 0 112.49.17c0 1-.56 1.73-1.83 2.27zm1.41-1.45v-.09c0-.59-.25-.83-.56-.83s-.46.17-.46.51c0 .49.41.67 1.02.41zM202.16 305.84v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM202.94 304.77c0-1.11.51-1.85 1.34-1.85s1.26.65 1.26 1.73-.51 1.85-1.35 1.85-1.25-.65-1.25-1.73zm.75-.07l1.05-.54c-.08-.38-.25-.61-.51-.61s-.54.38-.54 1.08zm1.1.09l-1 .53c.08.37.24.59.5.59s.5-.42.5-1.12zM202.16 312.49v.58h-.73v-.58H200a11.47 11.47 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM203.09 313.07v-.65h.91v-1.76h-.81v-.57l.81-.09v-.41l.76-.06v2.88h.82l-.06.65zM202.16 319.13v.59h-.73v-.59H200a11.44 11.44 0 01.33-2.87l.84.05-.55 2.15h.82v-1.07l.73-.08v1.15h.36l-.06.67zM203.13 319.72l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1.05s-.5 1.14-1.32 1.76h1.39v.67zM202.16 325.78v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82V324l.73-.07v1.15h.36l-.06.67zM203.15 325.74c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM202.16 332.43v.57h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM205.23 332.43v.57h-.73v-.59h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.37l-.07.67z"></path>
</g>
<g id="code">
<rect class="line" data-name="line" x="210.54" y="250.33" width="70.96" height="3.07" fill="#a3848d" opacity=".39" data-svg-origin="210.5399932861328 250.3300018310547" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 150.06; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="256.92" width="75.56" height="3.07" fill="#a58492" opacity=".39" data-svg-origin="210.5399932861328 256.9200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 159.26; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="263.57" width="61.58" height="3.07" fill="#a284a3" opacity=".39" data-svg-origin="210.5399932861328 263.57000732421875" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 131.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="270.28" width="52.68" height="3.07" fill="#9084a0" opacity=".39" data-svg-origin="210.5399932861328 270.2799987792969" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 113.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="276.86" width="43.68" height="3.07" fill="#83859e" opacity=".39" data-svg-origin="210.5399932861328 276.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 95.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="283.56" width="73.08" height="3.07" fill="#83929b" opacity=".39" data-svg-origin="210.5399932861328 283.55999755859375" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 154.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="290.42" width="85.72" height="3.07" fill="#829995" opacity=".39" data-svg-origin="210.5399932861328 290.4200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 179.58; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="296.86" width="71.54" height="3.07" fill="#84998b" opacity=".39" data-svg-origin="210.5399932861328 296.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 151.22; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="303.51" width="67.52" height="3.07" fill="#899985" opacity=".39" data-svg-origin="210.5399932861328 303.510009765625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="310.1" width="32.1" height="3.07" fill="#979987" opacity=".39" data-svg-origin="210.5399932861328 310.1000061035156" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 72.34; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="316.75" width="93.48" height="3.07" fill="#999488" opacity=".39" data-svg-origin="210.5399932861328 316.75" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 195.1; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="323.4" width="67.52" height="3.07" fill="#998e8a" opacity=".39" data-svg-origin="210.5399932861328 323.3999938964844" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.42" y="330.05" width="50.03" height="3.07" fill="#998c8c" opacity=".39" data-svg-origin="210.4199981689453 330.04998779296875" transform="matrix(0,0,0,1,210.42,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 108.2; stroke-dasharray: 0px, 999999px;"></rect>
</g>
</g>
<g id="iterm" opacity="0" data-svg-origin="283.99497985839844 311.64500427246094" transform="matrix(0,0,0,0,263.99498,371.645)" style="transform-origin: 0px 0px;">
<rect x="259.67" y="294.33" width="48.74" height="38.57" fill="#333"></rect>
<path d="M260.33 290.39h47.22a.86.86 0 01.86.86v4.38h-48.83v-4.49a.75.75 0 01.75-.75z" fill="#d3d3d3"></path>
<circle cx="262.39" cy="293.28" fill="#e84d4d" r="1.04"></circle>
<circle cx="266.28" cy="293.28" fill="#f2dd77" r="1.04"></circle>
<circle cx="269.99" cy="293.28" fill="#4eb785" r="1.04"></circle>
<path d="M264.11 303.17a.44.44 0 01-.29-.11.37.37 0 010-.56l1.36-1.28-1.36-1.29a.36.36 0 010-.55.41.41 0 01.58 0l1.66 1.56a.36.36 0 01.12.28.36.36 0 01-.12.27l-1.66 1.57a.46.46 0 01-.29.11z" fill="#83e5ab"></path>
<path id="cursor" d="M269.33 302.78a.4.4 0 00-.41-.39h-2.42a.39.39 0 100 .78h2.42a.4.4 0 00.41-.39z" fill="#83e5ab"></path>
</g>
<g class="webpage" clip-path="url(#clippy)">
<g id="website">
<rect x="133.88" y="243.41" width="52.47" height="242.13" rx="3.57" fill="#f0f0f2"></rect>
<line x1="141.67" y1="256.81" x2="174.02" y2="256.81" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="262.1" x2="179.77" y2="262.1" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="267.4" x2="174.02" y2="267.4" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<rect x="139.83" y="275.67" width="40.59" height="28.15" rx="3.22" fill="#f2c5c2"></rect>
<path d="M154.57 284.27a5.58 5.58 0 11-5.58-5.35 5.46 5.46 0 015.58 5.35z" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></path>
<line x1="144.8" y1="299.31" x2="161.56" y2="299.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.8" y1="294.69" x2="169.32" y2="294.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<g>
<rect x="139.83" y="308.41" width="37.69" height="49.32" rx="3.34" fill="#bdc0f4"></rect>
<line x1="146.12" y1="333.39" x2="157.69" y2="333.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="328.77" x2="163.05" y2="328.77" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="323.91" x2="168.46" y2="323.91" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="318.62" x2="172.42" y2="318.62" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="313.32" x2="168.46" y2="313.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
<g>
<rect x="139.83" y="363.82" width="40.59" height="58.46" rx="3.22" fill="#c2e7ef"></rect>
<line x1="144.98" y1="414.13" x2="158.87" y2="414.13" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.85" y1="410.5" x2="163.18" y2="410.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.62" y1="406.69" x2="166.2" y2="406.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.68" y1="402.92" x2="164.8" y2="402.92" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.75" y1="399.16" x2="158.5" y2="399.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<rect x="144.8" y="368.54" width="29.22" height="23.21" rx="6.86" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></rect>
</g>
<g>
<rect x="140.38" y="433.67" width="39.82" height="40.46" rx="3.34" fill="#d0b6d1"></rect>
<line x1="147.03" y1="467.66" x2="170.62" y2="467.66" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="463.31" x2="174.81" y2="463.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="458.97" x2="170.62" y2="458.97" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="454.16" x2="159.25" y2="454.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="450.37" x2="164.91" y2="450.37" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="446.39" x2="170.62" y2="446.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="442.04" x2="174.81" y2="442.04" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="437.7" x2="170.62" y2="437.7" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
</g>
</g>
</g>
<rect x="133.98" y="243.95" width="52.38" height="4.25" fill="#ddd"></rect>
<ellipse cx="136.91" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<ellipse cx="140.38" cy="246.08" rx=".93" ry=".92" fill="#eaeaea"></ellipse>
<ellipse cx="143.69" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<rect x="133.88" y="330.05" width="52.47" height="2.85" fill="#eaeaea"></rect>
<rect x="182.52" y="248.2" width="3.84" height="81.84" fill="#fff"></rect>
<rect id="scrollbar" x="183.24" y="249.77" width="2.4" height="22.21" rx="1.02" fill="#ddd"></rect>
</g>
</g>
</g>
</svg>

Start css animation only when button clicked for multiple div overlapping each other

I have a few different content(div) overlapping each other in one place. I wanted to have a fade in animation when i click the trigger to show the desired content. But the animation is only play when the page is onload and would never play again if i trigger another content.
HTML code:
<div id="content">
<div class="content1 sq" id="square"></div>
<div class="content2 sq" id="square"></div>
<div class="content3 sq" id="square"></div>
</div>
CSS code:
#square{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
Javascript:
var slideIndex = 1;
showDivs(slideIndex);
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("sq");
var dots = document.getElementsByClassName("click");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.visibility = "hidden";
}
x[slideIndex-1].style.visibility = "visible";
}
The code showed above is not the full code as the button to change to different content is through a SVG.
Please refer the link for the full code.
https://codepen.io/lemon55699/pen/bGVrMXz
If you only want to change the background color on click, then just get the fill color from clicked item and then apply the same background color on your square. like this.
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});
var slideIndex = 1;
// showDivs(slideIndex);
// function currentDiv() {
// var element = this,
// style = getComputedStyle(element),
// top = style.getPropertyValue('color');
// }
$(document).ready(function(){
$('.click').click(function(){
var bgColor = $(this).css('fill');
$('#square').css('background-color' , bgColor);
});
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.content1{
position: absolute;
top: 50px;
right: 10px;
width: 200px;
height: 200px;
border: 3px solid green;
fill: green;
background-color: green;
}
.content2{
position: absolute;
right: 10px;
top: 60px;
width: 180px;
height: 180px;
border: 3px solid yellow;
background-color: yellow;
}
.content3{
position: absolute;
right: 10px;
top: 70px;
width: 160px;
height: 160px;
border: 3px solid red;
background-color: red;
}
#square{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 click" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 click" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 click" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 click" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 click" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 click" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 click" cx="267.39" cy="61.66" r="50" >
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 click" cx="371.06" cy="121.51" r="50" />
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 click" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq" id="square"></div>
</div>
but as you mentined in comment, if you want to change the whole square with its properties and text and other stuff, then do it something like this, you need to create a relation between the clicked item and the square box, and show only reated item and not others. Like this,
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});
$(document).ready(function(){
$('.circle').click(function(){
var relation = $(this).data('relation');
var squareReltedToClick = $("#content").find('#' + relation);
$('.sq').removeClass('active');
squareReltedToClick.addClass('active');
var bgColor = $(this).css('fill');
$('.sq').css('background-color', bgColor);
});
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.sq{
position: absolute;
top: 50px;
right: 90px;
width: 200px;
height: 200px;
border: 3px solid green;
fill: green;
background-color: #00FF00;
opacity: 0;
text-align:center;
color: #fff;
font-size: 40px;
}
.sq.active {opacity:1;}
.sq.active{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 circle" data-relation="square9" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 circle" data-relation="square8" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 circle" data-relation="square7" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 circle" data-relation="square6" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 circle" data-relation="square5" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 circle" data-relation="square4" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 circle" data-relation="square3" cx="267.39" cy="61.66" r="50"/>
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 circle" data-relation="square2" cx="371.06" cy="121.51" r="50"/>
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 circle" data-relation="square1" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq active" id="square1">I am number 1</div>
<div class="content2 sq" id="square2">I am number 2</div>
<div class="content3 sq" id="square3">I am number 3</div>
<div class="content4 sq" id="square4">I am number 4</div>
<div class="content5 sq" id="square5">I am number 5</div>
<div class="content6 sq" id="square6">I am number 6</div>
<div class="content7 sq" id="square7">I am number 7</div>
<div class="content8 sq" id="square8">I am number 8</div>
<div class="content9 sq" id="square9">I am number 9</div>
</div>
I have changed some CSS properties for demo purpose, change these as per your need.

Reverse radialGradient SVG animation on mouseout on hovered element

I want the radialGradient animation to apply to the single hexagon only that you are hovering over and then onmouseout I want the animation to reverse.
How can I make the radialGradient trigger on the hexagon you hover on only (not all the hexagons) and then reverse the animation on mouseout/mouseleave? Thank you.
I tried adding
{ fill: url(#myRadialGradient4);}
to
.filter-class
But obviously as soon as mouseout happens the class is removed stopping the smooth reverse animation on mouseout.
I have tried this:
https://codepen.io/daneli84/pen/OJVZmeJ
//
var flagBlur = document.querySelector('.flag-blur');
var flags = document.querySelectorAll('.flag');
//
function startPage() {
flags.forEach(flag => {
flag.onmouseover = function() {
flag.classList.add('filter-class')
TweenMax.fromTo(flagBlur, 19, {
attr: {
stdDeviation: 0.5
}
}, {
attr: {
stdDeviation: 1
},
ease: Power1.easeInOut
});
}
flag.onmouseleave = function() {
flag.classList.remove('filter-class')
}
})
}
startPage();
/* grid styling */
use {-webkit-transition: 5s;
-webkit-transition: all 5s ease;
transition: all 5s ease;
}
use:hover {
cursor: pointer;
}
g { fill: url(#myRadialGradient4);}
#pod { -webkit-transition: all 5s ease;
transition: all 5s ease;}
text{pointer-events:none;color:white!important;}
.filter-class {
filter: url(#filter-1);
}
/* other styling */
svg {
width: 800px!important;
flex: 1;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
font-weight: 700;
font-family: sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100">
<defs>
<radialGradient id="myRadialGradient4"
fx="15%" fy="5%" r="65%"
spreadMethod="pad">
<stop offset="0%" stop-color="#fff" ></stop>
<stop offset="100%" stop-color="#50287C" ></stop>
<animate attributeName="fy" dur="2s" from="90%" to="0%" begin="pod.mouseover" end="pod.mouseout;indefinite" fill="freeze"/>
<animate attributeName="fy" dur="2s" from="0%" to="90%" begin="pod.mouseout" end="pod.mousover;indefinite" fill="freeze"/>
</radialGradient>
<filter id="innershadow" x0="20%" y0="5%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
<feOffset dy="0.2" dx="-0.1"></feOffset>
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
<feFlood flood-color="#E5E5C5" flood-opacity="-15"></feFlood>
<feComposite in2="shadowDiff" operator="in"></feComposite>
<feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>
<feGaussianBlur in="firstfilter" stdDeviation="0.9" result="blur2"></feGaussianBlur>
<feOffset dy="0.1" dx="0.1"></feOffset>
<feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
<feFlood flood-color="#fff" flood-opacity="0.5"></feFlood>
<feComposite in2="shadowDiff" operator="in"></feComposite>
<feComposite in2="firstfilter" operator="over"></feComposite>
</filter>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(20,0,12);stop-opacity:1;" />
<stop offset="100%" style="stop-color:rgb(8,20,128);stop-opacity:1" />
</linearGradient>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" class="flag-blur" in="shadowOffsetOuter1" result="shadowBlurOuter1">
</feGaussianBlur>
<feColorMatrix values="200 150 255 0 0 255 255 200 0 0 255 0 0 0 0 0 0 0 1 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<g id="pod">
<polygon stroke="#000000" stroke-width="0.1" points="5,-9 -5,-9 -10,0 -5,9 5,9 10,0" />
</g>
<!-- a transparent grey drop-shadow that blends with the background colour -->
</defs>
<g class="pod-wrap">
<g transform="translate(65, 68)" filter="url(#innershadow)">
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="2.3" fill="white">TRANSPORT</text>
</g>
<g transform="translate(50, 41)" filter="url(#innershadow)">
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(35, 50)" filter="url(#innershadow)" >
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(65, 50)" filter="url(#innershadow)">
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(50, 59)" filter="url(#innershadow)">
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
</g>
</svg>
The radial gradient you are animating would need to be a separate one from the one you are using for the rest of the hexagons.
On hover you would switch to the alternate gradient and start the <animation> by calling beginElement() on it. You might also need a third <animation> for the reverse animation.
But that approach is complicated, and I don't think it would produce a very satisfactory result.
A different approach
I would recommend a different approach.
Make the background of each hexagon a rectangle that has the gradient applied to it
then animate that background on hover
use a hexagon shaped clipping path on that rect
You can do that with pure CSS. And it is a lot simpler.
Note: in the example below I've stripped out the filter to make things simpler to follow for this example.
.pod-bg {
-webkit-transition: 5s;
-webkit-transition: all 5s ease;
transition: all 5s ease;
}
.pod-bg:hover {
transform: translate(0, -16px);
}
.h1.flag {
fill: url(#myRadialGradient4);
}
.pod-stroke {
stroke: #000000;
stroke-width: 0.1;
fill: none;
pointer-events: none;
cursor: pointer;
}
text {
pointer-events: none;
color: white;
}
/* other styling */
svg {
width: 800px!important;
flex: 1;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
font-weight: 700;
font-family: sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100">
<defs>
<radialGradient id="myRadialGradient4h" fx="15%" fy="45%" r="65%" spreadMethod="pad">
<stop offset="0%" stop-color="#fff" ></stop>
<stop offset="100%" stop-color="#50287C" ></stop>
</radialGradient>
<polygon id="pod" points="5,-9 -5,-9 -10,0 -5,9 5,9 10,0" />
<!-- a rect the same width and double the height of a pod hexagon -->
<rect id="bg-rect" x="-10" y="-9" width="20" height="36" fill="url(#myRadialGradient4h)"/>
<!-- a clipping path version of the pod hexagon -->
<clipPath id="pod-clip">
<use xlink:href="#pod"></use>
</clipPath>
</defs>
<g class="pod-wrap">
<g transform="translate(65, 68)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="2.3" fill="white">TRANSPORT</text>
</g>
<g transform="translate(50, 41)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(35, 50)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(65, 50)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(50, 59)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
</g>
</svg>

Fade color in path tag

In HTML with SVG you can create a rect with fading color:
<svg>
<rect width="100%" height="100%">
<animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
Now in my code I have a path like that:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
I am looking for a way to fade the color of the path along the path so that it illustrates some kind of data flow. Is there a way to accomplish that? (via CSS or Javascript).
Try this
#keyframes fade {
0% {
stroke: red;
fill: red;
}
50% {
stroke: blue;
fill: blue;
}
100% {
stroke: red;
fill: red;
}
}
#fade {
animation-name: fade;
animation-duration: 10s;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="fade" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon id="fade" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>

Categories

Resources