Dear Friends!
Please feel free to use this piece of SVG/CSS code in your apps and presentations! The license is CC BY 4.0. Also, since this is just the code, it’s very easy to modify it.
Enjoy And cudos to the modern web-standards
<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" viewBox="0 0 55 55">
<g id="between">
<path stroke="#9ed700" stroke-width="1.15" d="m27 14.5 11-6.553" />
<path stroke="#00acd9" stroke-width="1.15" d="M37.825 33.25 38 46.053" />
<path stroke="#7a2dd0" stroke-width="1.15" d="M16.175 33.25 5 27" />
</g>
<g id="outside">
<path stroke="#00acd9" stroke-width="1.15" d="M49 27 38 46.053" />
<path stroke="#f1f1f1" stroke-width="2" d="M38 46.053H16" />
<path stroke="#7a2dd0" stroke-width="1.15" d="M16 46.053 5 27" />
<path stroke="#f1f1f1" stroke-width="2" d="M5 27 16 7.947" />
<path stroke="#9ed700" stroke-width="1.15" d="M16 7.947h22" />
<path stroke="#f1f1f1" stroke-width="2" d="M38 7.947 49 27" />
<circle cx="49" cy="27" r="3.5" fill="#00acd9" />
<circle cx="38" cy="46.053" r="3.5" fill="#00acd9" />
<circle cx="16" cy="46.053" r="3.5" fill="#7a2dd0" />
<circle cx="5" cy="27" r="3.5" fill="#7a2dd0" />
<circle cx="16" cy="7.947" r="3.5" fill="#9ed700" />
<circle cx="38" cy="7.947" r="3.5" fill="#9ed700" />
</g>
<g id="inside">
<path stroke="#ff414d"
d="m27 39.5-10.825-6.25M16.175 33.25v-12.5M16.175 20.75 27 14.5M27 14.5l10.825 6.25M37.825 20.75v12.5M37.825 33.25 27 39.5" />
<circle cx="27" cy="39.5" r="2.5" fill="#ff414d" />
<circle cx="16.175" cy="33.25" r="2.5" fill="#ff414d" />
<circle cx="16.175" cy="20.75" r="2.5" fill="#ff414d" />
<circle cx="27" cy="14.5" r="2.5" fill="#ff414d" />
<circle cx="37.825" cy="20.75" r="2.5" fill="#ff414d" />
<circle cx="37.825" cy="33.25" r="2.5" fill="#ff414d" />
</g>
<style>
svg > * {
transform-origin: center;
--deg: 360deg;
--dur: 3s;
}
#inside {
animation: swing var(--dur) infinite;
}
#between {
animation: fade var(--dur) infinite;
opacity: 0;
}
#outside {
animation: swing var(--dur) infinite;
--deg: -360deg;
}
@keyframes fade {
65% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes swing {
75% {
transform: rotate(var(--deg));
}
100% {
transform: rotate(var(--deg));
}
}
</style>
<metadata>
<cc:Work>
<cc:license>https://creativecommons.org/licenses/by/4.0/</cc:license>
<cc:attributionName>Evgeny Blokhin, Alexander Volkov</cc:attributionName>
<cc:attributionURL>https://tilde.pro</cc:attributionURL>
</cc:Work>
</metadata>
</svg>