<svg width="900" height="700">
<ellipse cx="350" cy="150" rx= "250" ry="125" stroke="crimson" stroke-width="5px" fill="gold" id="my-ellipse">
</svg>
#my-ellipse{
animation-name: transformer;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes transformer{
0%{
transform: skew(15deg, 25deg) rotate(30deg);
}
15%{
transform: translate(30px, 20px) skew( 35deg, 25deg);
}
30%{
transform: rotate(270deg) skew(-15deg, 15deg);
}
60%{
transform: scale(0.5, 0.7) rotate(350deg);
}
100%{
transform: translate(50px, 70px) scale(1.5, 2.0) skew(5deg, 10deg) rotate(150deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.