SVG animate only one clip-path element but not the rest - svg

Question

I have the following code that works:
.clip-svg {
clip-path: url(#myClip);
animation: fadeInAnimation ease 3s;
}
#image-overlay {
position: absolute;
}
#image {
opacity: 0.035;
}
.container {
position: relative;
}
#overlay {
padding: 10px;
inset: 0;
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container">
<img id="image-overlay" class="clip-svg" src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" />
<img src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" id="image" />
</div>
<svg>
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<polygon points="0,0 .4,0 .4,.4 0,.4"/>
<circle cx=".2" cy=".42" r=".04"/>
<circle cx=".4" cy=".2" r=".04"/>
<polygon points=".6,.6 1,.6 1,1 .6,1" />
<circle cx=".8" cy=".6" r=".04"/>
<circle cx=".6" cy=".8" r=".04"/>
<polygon points=".6,0 1,0 1,.4 .6,.4" />
<circle cx=".6" cy=".2" r=".04"/>
<circle cx=".8" cy=".4" r=".04"/>
<polygon points="0,.6 .4,.6 .4,1 0,1"/>
<circle cx=".2" cy=".6" r=".04"/>
<circle cx=".4" cy=".8" r=".04"/>
</clipPath>
</defs>
</svg>
It works fine
Here is the link to the CodePen:
https://codepen.io/marceltudor/pen/xxJBqRO
I'd like to animate only one of the four puzzle pieces not all of them.
I tried a direct reference by #id in svg and in polygon
.clip-svg {
clip-path: url(#myClip);
}
#myFirstSvg #polygon1 {
animation: fadeInAnimation ease 3s;
}
#image-overlay {
position: absolute;
}
#image {
opacity: 0.035;
}
.container {
position: relative;
}
#overlay {
padding: 10px;
inset: 0;
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container">
<img id="image-overlay" class="clip-svg" src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" />
<img src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" id="image" />
</div>
<svg id="myFirstSvg">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<polygon id = "polygon1" points="0,0 .4,0 .4,.4 0,.4"/>
<circle cx=".2" cy=".42" r=".04"/>
<circle cx=".4" cy=".2" r=".04"/>
<polygon points=".6,.6 1,.6 1,1 .6,1" />
<circle cx=".8" cy=".6" r=".04"/>
<circle cx=".6" cy=".8" r=".04"/>
<polygon points=".6,0 1,0 1,.4 .6,.4" />
<circle cx=".6" cy=".2" r=".04"/>
<circle cx=".8" cy=".4" r=".04"/>
<polygon points="0,.6 .4,.6 .4,1 0,1"/>
<circle cx=".2" cy=".6" r=".04"/>
<circle cx=".4" cy=".8" r=".04"/>
</clipPath>
</defs>
</svg>
I tried as well the tag in svg
.clip-svg {
clip-path: url(#myClip);
}
#image-overlay {
position: absolute;
}
#image {
opacity: 0.035;
}
.container {
position: relative;
}
#overlay {
padding: 10px;
inset: 0;
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container">
<img id="image-overlay" class="clip-svg" src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" />
<img src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" id="image" />
</div>
<svg>
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<polygon points="0,0 .4,0 .4,.4 0,.4">
<animate id="animation1"
attributeName="opacity"
from="0" to="1" dur="1s"
begin="0s;animation2.end" />
<animate id="animation2"
attributeName="opacity"
from="1" to="0" dur="1s"
begin="animation1.end" />
</polygon>
<circle cx=".2" cy=".42" r=".04"/>
<circle cx=".4" cy=".2" r=".04"/>
<polygon points=".6,.6 1,.6 1,1 .6,1" />
<circle cx=".8" cy=".6" r=".04"/>
<circle cx=".6" cy=".8" r=".04"/>
<polygon points=".6,0 1,0 1,.4 .6,.4" />
<circle cx=".6" cy=".2" r=".04"/>
<circle cx=".8" cy=".4" r=".04"/>
<polygon points="0,.6 .4,.6 .4,1 0,1"/>
<circle cx=".2" cy=".6" r=".04"/>
<circle cx=".4" cy=".8" r=".04"/>
</clipPath>
</defs>
</svg>
But it does not animate the respective polygon.
Ideally I'd like to animate the group of the first polygon and the first two circles, but even to animate the first polygon I can't. Can you please help me on how to animate the first polygon, and just that one not all of the clip-path elements.
Thank you