I am struggling to replicate a CSS animation similar to this example
Currently, I am facing challenges with two specific aspects:
#1 - The arrow of my triangle must consistently point towards the circle, but my attempts at rotating it only result in the edge pointing correctly.
#2 - I need to create a subtle increase in size for the circle every time the triangle rotates past a certain point on the circle (as seen in the video).
This is what my code looks like so far...
svg {
width: 70vh;
height: 70vh;
background-color: white;
border: 3px solid navy;
margin: auto;
display: block;
margin-top: calc(50vh - 25vh);
}
.my-triangle {
width: 0;
height: 0;
fill: navy;
transform-origin: 200px 200px;
animation: color-transition 8s ease-in-out infinite, rotate-triangle 5s linear infinite;
scale: 0.2;
}
@keyframes rotate-triangle {
0% {
transform: rotate(0deg) translate(0, -795px);
}
100% {
transform: rotate(360deg) translate(0, -795px);
}
}
@keyframes color-transition {
0% {
fill: navy;
}
16.6% {
fill: peachpuff;
}
33.3% {
fill: pink;
}
49.9% {
fill: palevioletred;
}
66.4% {
fill: plum;
}
83.7% {
fill: purple;
}
100% {
fill: navy;
}
}
.my-circle {
r: 18px;
cx: 50%;
cy: 50%;
fill: navy;
animation: color-transition 8s ease-in-out infinite, change-size 5s ease-in-out infinite;
}
@keyframes change-size {
0% {
r: 18px;
}
90% {
r: 21px;
}
100% {
r: 18px;
}
}<svg viewBox="0 0 400 400">
<circle class="my-circle" />
<polygon class="my-triangle" points="200,75 300,225 100,225"/>
</svg>I have attempted various solutions, such as trying to link the circle and triangle before animating them, or experimenting with transformations and translations in both HTML and CSS.
Despite my efforts, I am feeling overwhelmed and exhausted from trying to solve this issue. Apologies for not being able to recall everything I have attempted.