I want to change cls-2 fill as rainbow color sync.I tried like this and it didn't work.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 955.55 955.55">
<defs><style>.cls-1{fill:rgb(255, 255, 255);}.cls-2{animation:mymove 5s infinate;}@keyframes mymove{from{fill:red}to{fill:red}}</style></defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<circle class="cls-1" cx="477.78" cy="477.78" r="477.78"/>
<rect class="cls-2" x="265.53" y="265.53" width="110.9" height="110.9"/>
<rect class="cls-2" x="422.33" y="265.53" width="110.9" height="110.9"/>
<rect class="cls-2" x="579.12" y="265.53" width="110.9" height="110.9"/>
<rect class="cls-2" x="265.53" y="422.33" width="110.9" height="110.9"/>
<rect class="cls-2" x="422.33" y="422.33" width="110.9" height="110.9"/>
<rect class="cls-2" x="579.12" y="422.33" width="110.9" height="110.9"/>
<rect class="cls-2" x="265.53" y="579.12" width="110.9" height="110.9"/>
<rect class="cls-2" x="422.33" y="579.12" width="110.9" height="110.9"/>
<rect class="cls-2" x="579.12" y="579.12" width="110.9" height="110.9"/>
</g>
</g>
</svg>
Can I do it using CSS or Javascript? Help me!
You have a spelling mistake in infinite and you need to add the colors milestones as follow
svg {
width: 200px;
height: 200px;
}
.cls-1{
fill: rgb(255, 255, 255);
}
.cls-2{
animation: rainbow 5s infinite;
}
@keyframes rainbow {
0% { fill: red; }
15% { fill: orange; }
30% { fill: yellow; }
45% { fill: green; }
60% { fill: blue; }
75% { fill: purple; }
100% { fill: red; }
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 955.55 955.55">
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<circle class="cls-1" cx="477.78" cy="477.78" r="477.78"/>
<rect class="cls-2" x="265.53" y="265.53" width="110.9" height="110.9"/>
<rect class="cls-2" x="422.33" y="265.53" width="110.9" height="110.9"/>
<rect class="cls-2" x="579.12" y="265.53" width="110.9" height="110.9"/>
<rect class="cls-2" x="265.53" y="422.33" width="110.9" height="110.9"/>
<rect class="cls-2" x="422.33" y="422.33" width="110.9" height="110.9"/>
<rect class="cls-2" x="579.12" y="422.33" width="110.9" height="110.9"/>
<rect class="cls-2" x="265.53" y="579.12" width="110.9" height="110.9"/>
<rect class="cls-2" x="422.33" y="579.12" width="110.9" height="110.9"/>
<rect class="cls-2" x="579.12" y="579.12" width="110.9" height="110.9"/>
</g>
</g>
</svg>infinite is misspelled and the keyframes needed to be defined using percentages and the colors of the rainbow (ROYGBIV).
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 955.55 955.55">
<defs>
<style>
.cls-1{fill:rgb(255, 255, 255);}
.cls-2{animation:mymove 5s infinite;}
@keyframes mymove{
0%{fill:red}
14%{fill:orange}
28%{fill:yellow}
42%{fill:green}
56%{fill:blue}
70%{fill:indigo}
84%{fill:violet}
100%{fill:red}
}
</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<circle class="cls-1" cx="477.78" cy="477.78" r="477.78"/>
<rect class="cls-2" x="265.53" y="265.53" width="110.9" height="110.9"/>
<rect class="cls-2" x="422.33" y="265.53" width="110.9" height="110.9"/>
<rect class="cls-2" x="579.12" y="265.53" width="110.9" height="110.9"/>
<rect class="cls-2" x="265.53" y="422.33" width="110.9" height="110.9"/>
<rect class="cls-2" x="422.33" y="422.33" width="110.9" height="110.9"/>
<rect class="cls-2" x="579.12" y="422.33" width="110.9" height="110.9"/>
<rect class="cls-2" x="265.53" y="579.12" width="110.9" height="110.9"/>
<rect class="cls-2" x="422.33" y="579.12" width="110.9" height="110.9"/>
<rect class="cls-2" x="579.12" y="579.12" width="110.9" height="110.9"/>
</g>
</g>
</svg>