Generateur d'animations SVG
Generez des graphiques SVG animes — spinners, loaders, formes, vagues et plus. Personnalisez couleurs, vitesse et taille, puis copiez ou telechargez.
#a855f7
#6366f1
SVG
<svg width="64" height="64" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="none" stroke="#6366f1" stroke-width="3" opacity="0.2"/>
<circle cx="25" cy="25" r="20" fill="none" stroke="#a855f7" stroke-width="3" stroke-linecap="round" stroke-dasharray="80, 200" stroke-dashoffset="0">
<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.5s" repeatCount="indefinite"/>
</circle>
</svg>Usage
<!-- Inline -->
<div dangerouslySetInnerHTML={{ __html: `<svg width="64" height="64" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">...` }} />
<!-- As image -->
<img src="data:image/svg+xml,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20vi..." alt="animated svg" />
<!-- As file -->
<img src="/spinner-ring.svg" alt="animated svg" />Explorer d'autres Goodies
D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.