[Résolu] Animation dégradé de forme (svg)

Bonjour à tous,

Je souhaite animer un logo conçu avec un dégradé de forme soit une succession de ronds superposés les uns après les autres avec pour chacun une couleur différente.
Je souhaiterai que ces ronds s'affichent les un après les autres de manières a voir le logo se dessiner.
Dans le but de le diffuser sur un site web.
Ce n'est apparemment pas possible d'effectuer cette animation en CSS3.
La solution me semble être l'animation d'un svg. Mais quel attribut dois-je utiliser pour l'apparition progressif ? Connaissez-vous des exemple similaires

Ci-dessous un exemple de logo que je souhaiterai animer :

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="26 -27 100 100" style="enable-background:new 26 -27 100 100;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#680E61;}
	.st1{fill:#690F62;}
	.st2{fill:#6A0F63;}
	.st3{fill:#6B1064;}
	.st4{fill:#6C1065;}
	.st5{fill:#6D1166;}
	.st6{fill:#6E1267;}
	.st7{fill:#6F1268;}
	.st8{fill:#701369;}
	.st9{fill:#71146A;}
	.st10{fill:#72146B;}
	.st11{fill:#73156C;}
	.st12{fill:#74156D;}
	.st13{fill:#75166E;}
	.st14{fill:#76176F;}
	.st15{fill:#771770;}
	.st16{fill:#781871;}
	.st17{fill:#791972;}
	.st18{fill:#7A1973;}
	.st19{fill:#7B1A74;}
	.st20{fill:#7B1A75;}
	.st21{fill:#7C1B76;}
	.st22{fill:#7D1C77;}
	.st23{fill:#7E1C78;}
	.st24{fill:#7F1D79;}
	.st25{fill:#801D7A;}
	.st26{fill:#811E7B;}
	.st27{fill:#821F7C;}
	.st28{fill:#831F7D;}
	.st29{fill:#84207E;}
	.st30{fill:#85217F;}
	.st31{fill:#862180;}
	.st32{fill:#872281;}
	.st33{fill:#882282;}
	.st34{fill:#892383;}
	.st35{fill:#8A2484;}
	.st36{fill:#8B2485;}
	.st37{fill:#8C2586;}
	.st38{fill:#8D2687;}
	.st39{fill:#8E2688;}
	.st40{fill:#8F2789;}
	.st41{fill:#90278A;}
	.st42{fill:#91288B;}
	.st43{fill:#92298C;}
	.st44{fill:#93298D;}
	.st45{fill:#942A8E;}
	.st46{fill:#952A8F;}
	.st47{fill:#962B90;}
	.st48{fill:#972C91;}
	.st49{fill:#982C92;}
	.st50{fill:#992D93;}
	.st51{fill:#9A2E94;}
	.st52{fill:#9B2E95;}
	.st53{fill:#9C2F96;}
	.st54{fill:#9D2F97;}
	.st55{fill:#9E3098;}
	.st56{fill:#9F3199;}
	.st57{fill:#A0319A;}
	.st58{fill:#A1329B;}
	.st59{fill:#A1339C;}
	.st60{fill:#A2339D;}
	.st61{fill:#A3349E;}
	.st62{fill:#A4349F;}
	.st63{fill:#A535A0;}
	.st64{fill:#A636A1;}
	.st65{fill:#A736A2;}
	.st66{fill:#A837A3;}
	.st67{fill:#A937A4;}
	.st68{fill:#AA38A5;}
	.st69{fill:#AB39A6;}
	.st70{fill:#AC39A7;}
	.st71{fill:#AD3AA8;}
	.st72{fill:#AE3BA9;}
	.st73{fill:#AF3BAA;}
	.st74{fill:#B03CAB;}
	.st75{fill:#B13CAC;}
	.st76{fill:#B23DAD;}
	.st77{fill:#B33EAE;}
	.st78{fill:#B43EAF;}
	.st79{fill:#B53FB0;}
	.st80{fill:#B640B1;}
	.st81{fill:#B740B2;}
	.st82{fill:#B841B3;}
	.st83{fill:#B941B4;}
	.st84{fill:#BA42B5;}
	.st85{fill:#BB43B6;}
	.st86{fill:#BC43B7;}
	.st87{fill:#BD44B8;}
	.st88{fill:#BE45B9;}
	.st89{fill:#BF45BA;}
	.st90{fill:#C046BB;}
	.st91{fill:#C146BC;}
	.st92{fill:#C247BD;}
	.st93{fill:#C348BE;}
	.st94{fill:#C448BF;}
	.st95{fill:#C549C0;}
	.st96{fill:#C649C1;}
	.st97{fill:#C64AC2;}
	.st98{fill:#C74BC3;}
	.st99{fill:#C84BC4;}
	.st100{fill:#C94CC5;}
	.st101{fill:#CA4DC6;}
	.st102{fill:#CB4DC7;}
	.st103{fill:#CC4EC8;}
	.st104{fill:#CD4EC9;}
	.st105{fill:#CE4FCA;}
	.st106{fill:#CF50CB;}
	.st107{fill:#D050CC;}
	.st108{fill:#D151CD;}
	.st109{fill:#D252CE;}
	.st110{fill:#D352CF;}
	.st111{fill:#D453D0;}
	.st112{fill:#D553D1;}
	.st113{fill:#D654D2;}
	.st114{fill:#D755D3;}
	.st115{fill:#D855D4;}
	.st116{fill:#D956D5;}
	.st117{fill:#DA56D6;}
	.st118{fill:#DB57D7;}
	.st119{fill:#DC58D8;}
	.st120{fill:#DD58D9;}
	.st121{fill:#DE59DA;}
	.st122{fill:#DF5ADB;}
	.st123{fill:#E05ADC;}
	.st124{fill:#E15BDD;}
	.st125{fill:#E25BDE;}
	.st126{fill:#E35CDF;}
	.st127{fill:#E45DE0;}
	.st128{fill:#E55DE1;}
	.st129{fill:#E65EE2;}
	.st130{fill:#E75FE3;}
	.st131{fill:#E85FE4;}
	.st132{fill:#E960E5;}
	.st133{fill:#EA60E6;}
	.st134{fill:#EB61E7;}
	.st135{fill:#EC62E8;}
	.st136{fill:#EC62E9;}
	.st137{fill:#ED63EA;}
	.st138{fill:#EE63EB;}
	.st139{fill:#EF64EC;}
	.st140{fill:#F065ED;}
	.st141{fill:#F165EE;}
	.st142{fill:#F266EF;}
	.st143{fill:#F367F0;}
	.st144{fill:#F467F1;}
	.st145{fill:#F568F2;}
	.st146{fill:#F668F3;}
	.st147{fill:#F769F4;}
	.st148{fill:#F86AF5;}
	.st149{fill:#F96AF6;}
	.st150{fill:#FA6BF7;}
	.st151{fill:#FB6CF8;}
	.st152{fill:#FC6CF9;}
	.st153{fill:#FD6DFA;}
	.st154{fill:#FE6DFB;}
	.st155{fill:#FF6EFC;}
</style>
<g>
	<circle class="st0" cx="74.8" cy="46.8" r="7"/>
	<circle class="st1" cx="74.8" cy="46.4" r="7"/>
	<circle class="st2" cx="74.8" cy="46.1" r="7"/>
	<circle class="st3" cx="74.8" cy="45.8" r="7"/>
	<circle class="st4" cx="74.8" cy="45.5" r="7"/>
	<circle class="st5" cx="74.8" cy="45.2" r="7"/>
	<circle class="st6" cx="74.8" cy="44.9" r="7"/>
	<circle class="st7" cx="74.8" cy="44.6" r="7"/>
	<circle class="st8" cx="74.8" cy="44.3" r="7"/>
	<circle class="st9" cx="74.8" cy="44" r="7"/>
	<circle class="st10" cx="74.8" cy="43.7" r="7"/>
	<circle class="st11" cx="74.8" cy="43.4" r="7"/>
	<circle class="st12" cx="74.8" cy="43.1" r="7"/>
	<circle class="st13" cx="74.8" cy="42.8" r="7"/>
	<circle class="st14" cx="74.8" cy="42.5" r="7"/>
	<circle class="st15" cx="74.8" cy="42.2" r="7"/>
	<circle class="st16" cx="74.8" cy="41.8" r="7"/>
	<circle class="st17" cx="74.8" cy="41.5" r="7"/>
	<circle class="st18" cx="74.8" cy="41.2" r="7"/>
	<circle class="st19" cx="74.8" cy="40.9" r="7"/>
	<circle class="st20" cx="74.8" cy="40.6" r="7"/>
	<circle class="st21" cx="74.8" cy="40.3" r="7"/>
	<circle class="st22" cx="74.8" cy="40" r="7"/>
	<circle class="st23" cx="74.8" cy="39.7" r="7"/>
	<circle class="st24" cx="74.8" cy="39.4" r="7"/>
	<circle class="st25" cx="74.8" cy="39.1" r="7"/>
	<circle class="st26" cx="74.8" cy="38.8" r="7"/>
	<circle class="st27" cx="74.8" cy="38.5" r="7"/>
	<circle class="st28" cx="74.8" cy="38.2" r="7"/>
	<circle class="st29" cx="74.8" cy="37.9" r="7"/>
	<circle class="st30" cx="74.8" cy="37.6" r="7"/>
	<circle class="st31" cx="74.8" cy="37.3" r="7"/>
	<circle class="st32" cx="74.8" cy="36.9" r="7"/>
	<circle class="st33" cx="74.8" cy="36.6" r="7"/>
	<circle class="st34" cx="74.8" cy="36.3" r="7"/>
	<circle class="st35" cx="74.8" cy="36" r="7"/>
	<circle class="st36" cx="74.8" cy="35.7" r="7"/>
	<circle class="st37" cx="74.8" cy="35.4" r="7"/>
	<circle class="st38" cx="74.8" cy="35.1" r="7"/>
	<circle class="st39" cx="74.8" cy="34.8" r="7"/>
	<circle class="st40" cx="74.8" cy="34.5" r="7"/>
	<circle class="st41" cx="74.8" cy="34.2" r="7"/>
	<circle class="st42" cx="74.8" cy="33.9" r="7"/>
	<circle class="st43" cx="74.8" cy="33.6" r="7"/>
	<circle class="st44" cx="74.8" cy="33.3" r="7"/>
	<circle class="st45" cx="74.8" cy="33" r="7"/>
	<circle class="st46" cx="74.8" cy="32.7" r="7"/>
	<circle class="st47" cx="74.8" cy="32.3" r="7"/>
	<circle class="st48" cx="74.8" cy="32" r="7"/>
	<circle class="st49" cx="74.8" cy="31.7" r="7"/>
	<circle class="st50" cx="74.8" cy="31.4" r="7"/>
	<circle class="st51" cx="74.8" cy="31.1" r="7"/>
	<circle class="st52" cx="74.8" cy="30.8" r="7"/>
	<circle class="st53" cx="74.8" cy="30.5" r="7"/>
	<circle class="st54" cx="74.8" cy="30.2" r="7"/>
	<circle class="st55" cx="74.8" cy="29.9" r="7"/>
	<circle class="st56" cx="74.8" cy="29.6" r="7"/>
	<circle class="st57" cx="74.8" cy="29.3" r="7"/>
	<circle class="st58" cx="74.8" cy="29" r="7"/>
	<circle class="st59" cx="74.8" cy="28.7" r="7"/>
	<circle class="st60" cx="74.8" cy="28.4" r="7"/>
	<circle class="st61" cx="74.8" cy="28.1" r="7"/>
	<circle class="st62" cx="74.8" cy="27.8" r="7"/>
	<circle class="st63" cx="74.8" cy="27.4" r="7"/>
	<circle class="st64" cx="74.8" cy="27.1" r="7"/>
	<circle class="st65" cx="74.8" cy="26.8" r="7"/>
	<circle class="st66" cx="74.8" cy="26.5" r="7"/>
	<circle class="st67" cx="74.8" cy="26.2" r="7"/>
	<circle class="st68" cx="74.8" cy="25.9" r="7"/>
	<circle class="st69" cx="74.8" cy="25.6" r="7"/>
	<circle class="st70" cx="74.8" cy="25.3" r="7"/>
	<circle class="st71" cx="74.8" cy="25" r="7"/>
	<circle class="st72" cx="74.8" cy="24.7" r="7"/>
	<circle class="st73" cx="74.8" cy="24.4" r="7"/>
	<circle class="st74" cx="74.8" cy="24.1" r="7"/>
	<circle class="st75" cx="74.8" cy="23.8" r="7"/>
	<circle class="st76" cx="74.8" cy="23.5" r="7"/>
	<circle class="st77" cx="74.8" cy="23.2" r="7"/>
	<circle class="st78" cx="74.8" cy="22.8" r="7"/>
	<circle class="st79" cx="74.8" cy="22.5" r="7"/>
	<circle class="st80" cx="74.8" cy="22.2" r="7"/>
	<circle class="st81" cx="74.8" cy="21.9" r="7"/>
	<circle class="st82" cx="74.8" cy="21.6" r="7"/>
	<circle class="st83" cx="74.8" cy="21.3" r="7"/>
	<circle class="st84" cx="74.8" cy="21" r="7"/>
	<circle class="st85" cx="74.8" cy="20.7" r="7"/>
	<circle class="st86" cx="74.8" cy="20.4" r="7"/>
	<circle class="st87" cx="74.8" cy="20.1" r="7"/>
	<circle class="st88" cx="74.8" cy="19.8" r="7"/>
	<circle class="st89" cx="74.8" cy="19.5" r="7"/>
	<circle class="st90" cx="74.8" cy="19.2" r="7"/>
	<circle class="st91" cx="74.8" cy="18.9" r="7"/>
	<circle class="st92" cx="74.8" cy="18.6" r="7"/>
	<circle class="st93" cx="74.8" cy="18.3" r="7"/>
	<circle class="st94" cx="74.8" cy="17.9" r="7"/>
	<circle class="st95" cx="74.8" cy="17.6" r="7"/>
	<circle class="st96" cx="74.8" cy="17.3" r="7"/>
	<circle class="st97" cx="74.8" cy="17" r="7"/>
	<circle class="st98" cx="74.8" cy="16.7" r="7"/>
	<circle class="st99" cx="74.8" cy="16.4" r="7"/>
	<circle class="st100" cx="74.8" cy="16.1" r="7"/>
	<circle class="st101" cx="74.8" cy="15.8" r="7"/>
	<circle class="st102" cx="74.8" cy="15.5" r="7"/>
	<circle class="st103" cx="74.8" cy="15.2" r="7"/>
	<circle class="st104" cx="74.8" cy="14.9" r="7"/>
	<circle class="st105" cx="74.8" cy="14.6" r="7"/>
	<circle class="st106" cx="74.8" cy="14.3" r="7"/>
	<circle class="st107" cx="74.8" cy="14" r="7"/>
	<circle class="st108" cx="74.8" cy="13.7" r="7"/>
	<circle class="st109" cx="74.8" cy="13.3" r="7"/>
	<circle class="st110" cx="74.8" cy="13" r="7"/>
	<circle class="st111" cx="74.8" cy="12.7" r="7"/>
	<circle class="st112" cx="74.8" cy="12.4" r="7"/>
	<circle class="st113" cx="74.8" cy="12.1" r="7"/>
	<circle class="st114" cx="74.8" cy="11.8" r="7"/>
	<circle class="st115" cx="74.8" cy="11.5" r="7"/>
	<circle class="st116" cx="74.8" cy="11.2" r="7"/>
	<circle class="st117" cx="74.8" cy="10.9" r="7"/>
	<circle class="st118" cx="74.8" cy="10.6" r="7"/>
	<circle class="st119" cx="74.8" cy="10.3" r="7"/>
	<circle class="st120" cx="74.8" cy="10" r="7"/>
	<circle class="st121" cx="74.8" cy="9.7" r="7"/>
	<circle class="st122" cx="74.8" cy="9.4" r="7"/>
	<circle class="st123" cx="74.8" cy="9.1" r="7"/>
	<circle class="st124" cx="74.8" cy="8.8" r="7"/>
	<circle class="st125" cx="74.8" cy="8.4" r="7"/>
	<circle class="st126" cx="74.8" cy="8.1" r="7"/>
	<circle class="st127" cx="74.8" cy="7.8" r="7"/>
	<circle class="st128" cx="74.8" cy="7.5" r="7"/>
	<circle class="st129" cx="74.8" cy="7.2" r="7"/>
	<circle class="st130" cx="74.8" cy="6.9" r="7"/>
	<circle class="st131" cx="74.8" cy="6.6" r="7"/>
	<circle class="st132" cx="74.8" cy="6.3" r="7"/>
	<circle class="st133" cx="74.8" cy="6" r="7"/>
	<circle class="st134" cx="74.8" cy="5.7" r="7"/>
	<circle class="st135" cx="74.8" cy="5.4" r="7"/>
	<circle class="st136" cx="74.8" cy="5.1" r="7"/>
	<circle class="st137" cx="74.8" cy="4.8" r="7"/>
	<circle class="st138" cx="74.8" cy="4.5" r="7"/>
	<circle class="st139" cx="74.8" cy="4.2" r="7"/>
	<circle class="st140" cx="74.8" cy="3.8" r="7"/>
	<circle class="st141" cx="74.8" cy="3.5" r="7"/>
	<circle class="st142" cx="74.8" cy="3.2" r="7"/>
	<circle class="st143" cx="74.8" cy="2.9" r="7"/>
	<circle class="st144" cx="74.8" cy="2.6" r="7"/>
	<circle class="st145" cx="74.8" cy="2.3" r="7"/>
	<circle class="st146" cx="74.8" cy="2" r="7"/>
	<circle class="st147" cx="74.8" cy="1.7" r="7"/>
	<circle class="st148" cx="74.8" cy="1.4" r="7"/>
	<circle class="st149" cx="74.8" cy="1.1" r="7"/>
	<circle class="st150" cx="74.8" cy="0.8" r="7"/>
	<circle class="st151" cx="74.8" cy="0.5" r="7"/>
	<circle class="st152" cx="74.8" cy="0.2" r="7"/>
	<circle class="st153" cx="74.8" cy="-0.1" r="7"/>
	<circle class="st154" cx="74.8" cy="-0.4" r="7"/>
	<circle class="st155" cx="74.8" cy="-0.8" r="7"/>
</g>
</svg>

D'avance merci pour votre aide très précieuse
Modifié par Hewen (11 Dec 2015 - 20:24)

salut,
c'est tout à fait possible de faire et le dégradé et l'animation en pure CSS.
Tu pourrais te renseigner sur les propriétés linear-gradient et animation / @keyframes

Bonjour,

Possible en svg, mais aussi en html5.

C'est un genre de truc comme ça que tu voudrais : http://jsfiddle.net/mq9k16sa/ ?

Je l'ai fait un peu plus petit que ta figure, mais je pense que tu sauras adapter facilement.

Amicalement,

Pas mal la balise caneva parsimonhi !

Ma solution full css (basée sur la proposition de Zelalsan) : CodePen

Merci oliver C. Et pas mal aussi le css.

Je me posais une petite question : en svg, si on dessine des disques (de couleur uniforme) de bas en haut, la surface correspondant au dernier disque en haut est en fait de couleur uniforme (j'en ai tenu compte approximativement en ne faisant pas aller le gradient jusqu'en haut de la figure, et j'avais d'ailleurs fait une petite erreur dans mon code sur ce point là que j'ai corrigée depuis).

Tu ferais comment en css ?

Amicalement,
Modifié par parsimonhi (10 Dec 2015 - 09:10)

Bonjour,

parsimonhi a écrit :
Je me posais une petite question : en svg, si on dessine des disques (de couleur uniforme) de bas en haut, la surface correspondant au dernier disque en haut est en fait de couleur uniforme (j'en ai tenu compte approximativement en ne faisant pas aller le gradient jusqu'en haut de la figure, et j'avais d'ailleurs fait une petite erreur dans mon code sur ce point là que j'ai corrigée depuis).

Tu ferais comment en css ?

En fait je pense que tu le ferais de la même manière, i.e. approximativement, en % de ta hauteur finale...

background: linear-gradient(to top, #680e61 0%, #ff6efc 80%);
/* ou plus proprement */
background: linear-gradient(to top, #680e61 0%, #ff6efc 80%, #ff6efc 100%);

SolidSnake a écrit :
En fait je pense que tu le ferais de la même manière, i.e. approximativement, en % de ta hauteur finale...

Effectivement ! Merci pour cette précision !

Amicalement,

C'est précisément cela que j'aime sur ce forum : quelqu'un pose une question, chacun donne sa soluce perso et on apprend autant des autres qui donnent la leur. Bien à vous tous.

Vous êtes allez bien au delà de mes espérances en me fournissant plusieurs solutions. Merci à tous pour votre contribution. RESOLU