Guillaume Duverger - Développement & Graphisme - Blog

Dernière mise à jour de l'article : mars 2021

Le morphing CSS c'est quoi ?

Le morphing en CSS consiste à animer des formes qui simulent une transformation. Il existe plusieurs façons de faire du morphing en CSS (on ne parlera pas dans cet article de solution en JavaScript), que ce soit en utilisant des propriétés CSS telles que clip-path, l'attribut CSS de présentation d, les transformations CSS à l'aide de la fonction calc(), ou encore en associant CSS et SVG...

Morphing avec animation CSS :

<div class=morph1></div>

.morph1 {

  width: 300px;
  height: 300px;
  animation: morph 2s ease-in-out infinite;
}


@keyframes morph {
  0%, 5% {
    background: gold;
    -webkit-clip-path: polygon(7.23607em 2em, 7.52996em 2.90451em, 7.82385em 3.80902em, 8.11775em 4.71353em, 8.41164em 5.61803em, 9.36269em 5.61803em, 10.31375em 5.61803em, 11.26481em 5.61803em, 12.21586em 5.61803em, 11.44644em 6.17705em, 10.67702em 6.73607em, 9.9076em 7.29508em, 9.13818em 7.8541em, 9.43207em 8.75861em, 9.72597em 9.66312em, 10.01986em 10.56763em, 10.31375em 11.47214em, 9.54433em 10.91312em, 8.77491em 10.3541em, 8.00549em 9.79508em, 7.23607em 9.23607em, 6.46665em 9.79508em, 5.69723em 10.3541em, 4.92781em 10.91312em, 4.15838em 11.47214em, 4.45228em 10.56763em, 4.74617em 9.66312em, 5.04006em 8.75861em, 5.33395em 7.8541em, 4.56453em 7.29508em, 3.79511em 6.73607em, 3.02569em 6.17705em, 2.25627em 5.61803em, 3.20733em 5.61803em, 4.15838em 5.61803em, 5.10944em 5.61803em, 6.0605em 5.61803em, 6.35439em 4.71353em, 6.64828em 3.80902em, 6.94218em 2.90451em);
    clip-path: polygon(7.23607em 2em, 7.52996em 2.90451em, 7.82385em 3.80902em, 8.11775em 4.71353em, 8.41164em 5.61803em, 9.36269em 5.61803em, 10.31375em 5.61803em, 11.26481em 5.61803em, 12.21586em 5.61803em, 11.44644em 6.17705em, 10.67702em 6.73607em, 9.9076em 7.29508em, 9.13818em 7.8541em, 9.43207em 8.75861em, 9.72597em 9.66312em, 10.01986em 10.56763em, 10.31375em 11.47214em, 9.54433em 10.91312em, 8.77491em 10.3541em, 8.00549em 9.79508em, 7.23607em 9.23607em, 6.46665em 9.79508em, 5.69723em 10.3541em, 4.92781em 10.91312em, 4.15838em 11.47214em, 4.45228em 10.56763em, 4.74617em 9.66312em, 5.04006em 8.75861em, 5.33395em 7.8541em, 4.56453em 7.29508em, 3.79511em 6.73607em, 3.02569em 6.17705em, 2.25627em 5.61803em, 3.20733em 5.61803em, 4.15838em 5.61803em, 5.10944em 5.61803em, 6.0605em 5.61803em, 6.35439em 4.71353em, 6.64828em 3.80902em, 6.94218em 2.90451em);
  }
  45%, 55% {
    background: crimson;
    -webkit-clip-path: polygon(7.23607em 3.61803em, 7.5585em 3.34495em, 7.92147em 3.12866em, 8.3151em 2.97507em, 8.72864em 2.88836em, 9.15081em 2.8709em, 9.57009em 2.92316em, 9.97506em 3.04373em, 10.35466em 3.2293em, 10.69854em 3.47483em, 10.99731em 3.7736em, 11.24283em 4.11748em, 11.42841em 4.49708em, 11.54897em 4.90204em, 11.60124em 5.32133em, 11.58377em 5.7435em, 11.49706em 6.15704em, 11.34347em 6.55066em, 11.12718em 6.91364em, 10.8541em 7.23607em, 7.23607em 10.8541em, 3.61803em 7.23607em, 3.34495em 6.91364em, 3.12866em 6.55066em, 2.97507em 6.15704em, 2.88836em 5.7435em, 2.8709em 5.32133em, 2.92316em 4.90204em, 3.04373em 4.49708em, 3.2293em 4.11748em, 3.47483em 3.7736em, 3.7736em 3.47483em, 4.11748em 3.2293em, 4.49708em 3.04373em, 4.90204em 2.92316em, 5.32133em 2.8709em, 5.7435em 2.88836em, 6.15704em 2.97507em, 6.55066em 3.12866em, 6.91364em 3.34495em);
    clip-path: polygon(7.23607em 3.61803em, 7.5585em 3.34495em, 7.92147em 3.12866em, 8.3151em 2.97507em, 8.72864em 2.88836em, 9.15081em 2.8709em, 9.57009em 2.92316em, 9.97506em 3.04373em, 10.35466em 3.2293em, 10.69854em 3.47483em, 10.99731em 3.7736em, 11.24283em 4.11748em, 11.42841em 4.49708em, 11.54897em 4.90204em, 11.60124em 5.32133em, 11.58377em 5.7435em, 11.49706em 6.15704em, 11.34347em 6.55066em, 11.12718em 6.91364em, 10.8541em 7.23607em, 7.23607em 10.8541em, 3.61803em 7.23607em, 3.34495em 6.91364em, 3.12866em 6.55066em, 2.97507em 6.15704em, 2.88836em 5.7435em, 2.8709em 5.32133em, 2.92316em 4.90204em, 3.04373em 4.49708em, 3.2293em 4.11748em, 3.47483em 3.7736em, 3.7736em 3.47483em, 4.11748em 3.2293em, 4.49708em 3.04373em, 4.90204em 2.92316em, 5.32133em 2.8709em, 5.7435em 2.88836em, 6.15704em 2.97507em, 6.55066em 3.12866em, 6.91364em 3.34495em);
  }
  95%, 100% {
    background: gold;
    -webkit-clip-path: polygon(7.23607em 2em, 7.52996em 2.90451em, 7.82385em 3.80902em, 8.11775em 4.71353em, 8.41164em 5.61803em, 9.36269em 5.61803em, 10.31375em 5.61803em, 11.26481em 5.61803em, 12.21586em 5.61803em, 11.44644em 6.17705em, 10.67702em 6.73607em, 9.9076em 7.29508em, 9.13818em 7.8541em, 9.43207em 8.75861em, 9.72597em 9.66312em, 10.01986em 10.56763em, 10.31375em 11.47214em, 9.54433em 10.91312em, 8.77491em 10.3541em, 8.00549em 9.79508em, 7.23607em 9.23607em, 6.46665em 9.79508em, 5.69723em 10.3541em, 4.92781em 10.91312em, 4.15838em 11.47214em, 4.45228em 10.56763em, 4.74617em 9.66312em, 5.04006em 8.75861em, 5.33395em 7.8541em, 4.56453em 7.29508em, 3.79511em 6.73607em, 3.02569em 6.17705em, 2.25627em 5.61803em, 3.20733em 5.61803em, 4.15838em 5.61803em, 5.10944em 5.61803em, 6.0605em 5.61803em, 6.35439em 4.71353em, 6.64828em 3.80902em, 6.94218em 2.90451em);
    clip-path: polygon(7.23607em 2em, 7.52996em 2.90451em, 7.82385em 3.80902em, 8.11775em 4.71353em, 8.41164em 5.61803em, 9.36269em 5.61803em, 10.31375em 5.61803em, 11.26481em 5.61803em, 12.21586em 5.61803em, 11.44644em 6.17705em, 10.67702em 6.73607em, 9.9076em 7.29508em, 9.13818em 7.8541em, 9.43207em 8.75861em, 9.72597em 9.66312em, 10.01986em 10.56763em, 10.31375em 11.47214em, 9.54433em 10.91312em, 8.77491em 10.3541em, 8.00549em 9.79508em, 7.23607em 9.23607em, 6.46665em 9.79508em, 5.69723em 10.3541em, 4.92781em 10.91312em, 4.15838em 11.47214em, 4.45228em 10.56763em, 4.74617em 9.66312em, 5.04006em 8.75861em, 5.33395em 7.8541em, 4.56453em 7.29508em, 3.79511em 6.73607em, 3.02569em 6.17705em, 2.25627em 5.61803em, 3.20733em 5.61803em, 4.15838em 5.61803em, 5.10944em 5.61803em, 6.0605em 5.61803em, 6.35439em 4.71353em, 6.64828em 3.80902em, 6.94218em 2.90451em);
  }
}	

Morphing avec transition CSS :

Passez votre souris :

<div class=morph2></div>

    
.morph2 {
	
clip-path: polygon(7.23607em 3.61803em, 7.5585em 3.34495em, 7.92147em 3.12866em, 8.3151em 2.97507em, 8.72864em 2.88836em, 9.15081em 2.8709em, 9.57009em 2.92316em, 9.97506em 3.04373em, 10.35466em 3.2293em, 10.69854em 3.47483em, 10.99731em 3.7736em, 11.24283em 4.11748em, 11.42841em 4.49708em, 11.54897em 4.90204em, 11.60124em 5.32133em, 11.58377em 5.7435em, 11.49706em 6.15704em, 11.34347em 6.55066em, 11.12718em 6.91364em, 10.8541em 7.23607em, 7.23607em 10.8541em, 3.61803em 7.23607em, 3.34495em 6.91364em, 3.12866em 6.55066em, 2.97507em 6.15704em, 2.88836em 5.7435em, 2.8709em 5.32133em, 2.92316em 4.90204em, 3.04373em 4.49708em, 3.2293em 4.11748em, 3.47483em 3.7736em, 3.7736em 3.47483em, 4.11748em 3.2293em, 4.49708em 3.04373em, 4.90204em 2.92316em, 5.32133em 2.8709em, 5.7435em 2.88836em, 6.15704em 2.97507em, 6.55066em 3.12866em, 6.91364em 3.34495em);
background: crimson;
width: 300px;
height: 300px;
transition: all 2s
	
}

.morph2:hover {
	
clip-path: polygon(7.23607em 2em, 7.52996em 2.90451em, 7.82385em 3.80902em, 8.11775em 4.71353em, 8.41164em 5.61803em, 9.36269em 5.61803em, 10.31375em 5.61803em, 11.26481em 5.61803em, 12.21586em 5.61803em, 11.44644em 6.17705em, 10.67702em 6.73607em, 9.9076em 7.29508em, 9.13818em 7.8541em, 9.43207em 8.75861em, 9.72597em 9.66312em, 10.01986em 10.56763em, 10.31375em 11.47214em, 9.54433em 10.91312em, 8.77491em 10.3541em, 8.00549em 9.79508em, 7.23607em 9.23607em, 6.46665em 9.79508em, 5.69723em 10.3541em, 4.92781em 10.91312em, 4.15838em 11.47214em, 4.45228em 10.56763em, 4.74617em 9.66312em, 5.04006em 8.75861em, 5.33395em 7.8541em, 4.56453em 7.29508em, 3.79511em 6.73607em, 3.02569em 6.17705em, 2.25627em 5.61803em, 3.20733em 5.61803em, 4.15838em 5.61803em, 5.10944em 5.61803em, 6.0605em 5.61803em, 6.35439em 4.71353em, 6.64828em 3.80902em, 6.94218em 2.90451em);
background: gold
	
}   

Nous avons utilisé pour les deux exemples la propriété CSS clip-path. Pour obtenir cet effet de morphing, il suffit de changer les points de chemins des formes.

Un autre exemple avec la propriété CSS clip-path sur une image (passez votre souris) :

<img class="morph3" src="image.jpg" alt>

.morph3{   
	
margin:1rem auto;
height:400px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

transition:1s ease
	
	}
    
.morph3:hover{
	
clip-path: polygon(50% 0, 100% 0, 100% 35%, 100% 80%, 100% 100%, 50% 100%, 0 100%, 0 80%, 0 35%, 0 0);


}   

Une autre façon de faire du morphing en CSS est d'utiliser l'attribut de présentation d sur un chemin SVG. Si vous connaissez le langage SVG, cet attribut ne doit pas vous être inconnu. Il définit un chemin à suivre. Attention toutefois, il s'agit d'une spécificité de Chromium, donc à utiliser (ou pas) avec précaution.

<svg class=demo_svg1 viewBox="0 0 541 506">
<path/>
</svg>

.demo_svg1 {

width: 541px;
height: 506px;

}

.demo_svg1 path {

fill: #ff5656;
d: path("M168 388.7l102.4 102.2 102.4-102.2 125.5-125.5c56.5-56.5 56.5-148.2 0-204.8-56.5-56.5-148.25-56.5-204.8 0 0 0-15.6 15.5-23 23-7.5-7.5-23-23-23-23-56.5-56.5-148.2-56.5-204.8 0-56.5 56.5-56.5 148.2 0 204.8l125.5 125.5");
transition: .4s 
}

.demo_svg1:active path {
fill:#fcd669;
d: path("M105 506l165-88 166 88-33-183c57.5-56 132.5-132 132-132-.5 0-180-26-182-26 0 0-82.3-165-83.3-165-1 0-82 165-82 165-1.8 0-181.5 26-183 26-1.5 0 75.7 76 132 132l-32 183")
}

Source originale démo .

Autre exemple :

<svg class=demo_svg2 viewBox="0 0 500 360">
<path/>
</svg>	

.demo_svg2 {

width: 500px;
height:360px;

}

.demo_svg2 path{
	
transition: .25s cubic-bezier(0.64, 0.57, 0.67, 1.53);
d: path("M186.10166,339.23845 c 0.56986,-6.70536 1.82102,-12.84126 2.81184,-18.00882 0.99083,-5.16757 1.72129,-9.36683 1.24972,-12.19891 -0.94316,-5.66415 -1.48816,-2.15847 -1.77693,-3.55384 -0.28878,-1.39538 0.0887,-2.95934 0.25385,-4.56923 0.1651,-1.6099 1.10563,-3.87972 0.76153,-5.07693 -0.34408,-1.19721 -1.31435,-1.2127 -1.52308,-1.77693 -0.20871,-0.56422 -0.32633,-0.59025 0,-1.26923 0.32634,-0.67899 1.58806,-1.69739 2.53847,-2.03077 0.95041,-0.33338 0.36828,2.14398 2.79231,0 1.21201,-1.072 1.94801,-4.4405 2.26684,-7.91925 0.31884,-3.47875 0.22053,-7.06775 -0.23607,-8.58077 -0.91318,-3.02603 -1.12427,-1.04699 -1.52307,-1.77692 -0.3988,-0.72994 -0.68385,-1.50135 -0.76155,-2.53848 -0.0778,-1.03712 0.26031,-2.02944 0.50769,-3.55385 0.24738,-1.5244 1.61563,-4.46743 1.01539,-5.58462 -0.60025,-1.11718 -1.38993,-0.17467 -1.77692,-0.76153 -0.38699,-0.58687 -0.37923,-1.50925 0,-2.28463 0.37921,-0.77537 1.38814,-1.46934 2.28461,-1.77693 0.89647,-0.30757 1.99407,0.49335 2.79232,0 0.79825,-0.49334 0.49117,0.20503 1.26924,-2.53845 0.77805,-2.74347 1.72722,-11.45784 1.26922,-14.2154 -0.45801,-2.75757 -0.58636,-0.26296 -1.01538,-2.28461 -0.42903,-2.02166 0.6513,-7.83382 0,-9.90002 -0.65133,-2.06622 -1.51992,-1.72312 -1.77693,-2.53846 -0.25702,-0.81534 -0.10704,-1.47471 0,-2.03078 0.10705,-0.55608 -0.20702,-0.58339 0.50769,-1.26923 0.7147,-0.68583 2.89312,0.0875 4.31539,-1.52308 1.42228,-1.61045 1.53553,-5.47829 1.77692,-8.12309 0.2414,-2.6448 0.44902,-6.17762 -0.25384,-7.61539 -0.70286,-1.43777 -0.98226,0.26292 -1.52308,-1.26924 -0.54083,-1.53215 1.86494,-5.70557 1.52308,-7.61539 -0.34187,-1.9098 -1.76272,-2.35294 -2.03077,-3.3 -0.26807,-0.94706 -0.36063,-1.29339 0,-2.03077 0.36064,-0.73739 1.42901,-1.30403 2.28461,-1.77693 0.85561,-0.47288 1.13504,0.93756 2.79232,-1.01539 1.65729,-1.95294 2.91642,-9.65434 2.28461,-12.18462 -0.6318,-2.53027 -1.40088,-0.56954 -2.03077,-2.53847 -0.62989,-1.96893 0.80343,-6.78861 0.50769,-9.13846 -0.29572,-2.34987 -1.59379,-3.56543 -1.52306,-4.82309 0.0708,-1.25767 0.44302,-1.05327 1.23974,-1.9705 0.79673,-0.91722 2.28661,-0.41753 3.83717,-2.85259 1.55058,-2.43506 2.32032,-10.12441 1.52308,-12.43848 -0.79723,-2.31406 -0.93242,-0.88621 -1.34359,-1.79231 -0.41115,-0.9061 -0.1759,-2.38913 -0.11926,-3.53847 0.0567,-1.14933 0.10932,-2.02725 0.19359,-3.04615 0.0843,-1.0189 0.47061,-2.09478 0.26923,-2.82178 -0.20137,-0.72702 -0.61746,-0.85698 -0.71667,-1.67311 -0.0992,-0.81614 0.30966,-1.39288 0.92564,-2.35765 0.616,-0.96476 1.18471,0.49031 2.62822,-2.23974 0.72175,-1.36504 1.26107,-3.6642 1.56487,-7.79186 0.12425,-3.76864 0.37209,-6.49381 0.15178,-7.99281 -0.44063,-2.998 -0.9687,-0.98831 -1.26922,-2.79231 -0.30054,-1.80401 0.95243,-5.98577 0.76153,-7.86924 -0.1909,-1.88347 -0.88956,-1.96424 -1.01539,-3.3 -0.12581,-1.33577 0.30442,-2.04448 1.49493,-3.67176 1.1905,-1.62729 3.67963,-2.49744 5.55249,-2.9564 1.87288,-0.45896 3.23261,-1.2054 4.37567,-1.24109 1.14308,-0.0357 1.98374,0.23272 2.7923,-0.85261 0.80859,-1.08533 0.48977,-2.55179 0.68886,-4.37172 0.19909,-1.81994 0.3711,-3.92339 0.52648,-6.07286 0.15536,-2.14947 0.29406,-4.34495 0.4265,-6.34896 0.13249,-2.004 0.69316,-2.24 0.38895,-5.20002 -0.30422,-2.96002 -1.07296,-2.8414 -1.32818,-4.06155 -0.25525,-1.22015 -0.30626,-1.72616 -0.26926,-2.91153 0.037,-1.18535 0.38986,-3.14101 0.0743,-4.19617 -0.3155,-1.27954 -1.92681,-0.84508 -1.52306,-2.79363 0.40372,-1.94854 0.95508,-3.0246 1.79652,-4.32251 0.84145,-1.2979 2.10674,-2.41575 4.33958,-3.2422 2.23285,-0.82645 5.43325,-1.36151 10.14494,-1.49381 4.71167,-0.1323 10.93462,0.13814 19.21257,0.92268 8.27795,0.78454 14.49046,1.72073 19.22219,2.77007 4.73176,1.04934 7.98276,2.21183 10.33767,3.44896 2.35493,1.23714 3.8138,2.54891 4.96128,3.89682 1.14748,1.34791 2.58402,2.12575 3.09301,4.11362 0.50899,1.98787 -0.76582,1.78358 -1.26923,3.55385 -0.50341,1.77028 -0.71353,5.52166 -1.52308,7.1077 -0.80956,1.58605 -1.10337,-0.11869 -2.28461,2.53848 -1.18125,2.65723 -0.84808,2.61843 -1.15052,4.47862 -0.30243,1.86019 -0.53171,4.02502 -0.71158,6.30647 -0.17986,2.28146 -0.31034,4.67956 -0.41514,7.00625 -0.10477,2.32669 -1.78699,4.10222 -0.26123,6.57791 1.52576,2.47568 5.92838,1.69377 7.86923,3.04616 1.94087,1.35238 3.29352,2.80532 3.80771,4.31538 0.51421,1.51006 0.0616,2.64611 -0.25385,3.80771 -0.31537,1.1616 -0.97178,1.2383 -1.52307,3.04614 -0.55129,1.80785 -0.32143,6.20321 -1.01541,7.86925 -0.69396,1.66605 -1.04451,0.49815 -1.77692,2.28461 -0.73239,1.78647 -0.85386,5.8756 -1.01538,8.63079 -0.16151,2.75518 -0.68508,6.21532 0,7.86923 0.68509,1.65392 1.05903,2.21 1.39616,3.68078 0.33712,1.47077 -1.0071,2.13623 -1.39616,4.18848 -0.38905,2.05224 0.38448,4.5516 -0.25384,6.34615 -0.63832,1.79455 -2.16316,1.41253 -3.04616,4.06155 -0.883,2.64903 -1.06097,9.2651 0,11.67693 1.06096,2.41183 2.54737,1.65846 3.04616,2.79232 0.49879,1.13386 0.26588,1.68441 -0.12694,2.53847 -0.39282,0.85405 -0.56457,0.29228 -1.65001,2.28461 -1.08543,1.99233 -0.42234,8.95015 -1.52307,11.16924 -1.10074,2.21909 -1.56475,0.18768 -2.53847,2.53846 -0.97373,2.35079 -1.26334,9.12047 0,11.67694 1.26333,2.55648 2.96529,1.22054 3.55385,2.41155 0.58856,1.191 1.21465,2.53712 0.76155,3.42692 -0.45312,0.8898 -1.91823,0.4512 -2.79232,2.03077 -0.87409,1.57957 0.11813,5.43243 -0.50769,7.36154 -0.62589,1.92912 -1.543,1.21791 -2.53847,4.06156 -0.99548,2.84364 -2.8907,10.90655 -1.52308,13.20001 1.36762,2.29345 1.55992,0.17466 2.53847,1.01539 0.97855,0.84073 2.03309,1.95372 1.77693,3.42692 -0.25619,1.4732 -1.22891,1.45657 -2.28462,3.42694 -1.05572,1.97036 -0.17043,7.28715 -1.01539,9.3923 -0.84496,2.10517 -1.33969,0.45508 -2.53846,3.30001 -1.32571,3.7334 -2.79348,10.84453 -2.03078,14.2154 1.52424,2.73626 3.04531,0.99757 4.06155,1.77693 1.01623,0.77936 1.84085,1.66826 2.03077,2.53846 0.18991,0.8702 -0.0678,1.42574 -0.50769,2.03077 -0.43984,0.60503 -0.66084,-0.73019 -2.03078,1.26923 -1.36993,1.99943 -0.52854,10.47907 -2.28462,11.93079 -1.75607,1.45172 0.6515,-2.07651 -1.52308,0 -0.83344,1.41903 -1.40265,4.77981 -1.701,8.21553 -0.29836,3.43572 -0.32587,6.9464 -0.0759,8.66526 1.38839,3.18386 3.86985,1.45089 4.31539,2.41155 0.44554,0.96064 0.34056,1.34962 0,2.03077 -0.34056,0.68113 -1.16138,-0.93946 -2.28462,1.01538 -1.12323,1.95484 -0.43652,9.07254 -1.01537,11.42308 -0.57889,2.35055 -1.37015,0.12027 -1.90386,2.28462 -0.53371,2.16439 -0.12694,7.53078 -0.50769,10.78849 -0.38077,3.25769 -0.76388,5.8408 -1.14231,9.77308 -1.98196,0 -4.58745,-0.0114 -8.01082,-0.0327 -3.29645,-0.14773 -6.14155,-0.0506 -11.39505,-0.0863 -4.7458,0.0913 -7.58458,-0.0773 -13.66074,-0.12197 -4.68,-0.0446 -9.29736,-0.0922 -14.80794,-0.13974 -4.87597,-0.0476 -9.88365,-0.0952 -14.8366,-0.13988 -4.82604,-0.17155 -8.83582,-0.0863 -13.74677,-0.12197 -4.78402,0.0913 -7.80382,-0.0654 -11.53838,-0.0863 -3.09994,-0.0209 -6.15309,-0.0327 -8.2115,-0.0327 z");
fill:currentcolor
	
	}
	
	.demo_svg2:hover path{
d: path("m 185.38374,338.38728 c 0,-2.23384 0.63169,-4.6807 1.67259,-7.24204 1.04049,-2.56134 2.4895,-5.23726 4.12323,-7.92914 1.63363,-2.69186 3.45219,-5.39977 5.2317,-8.02518 1.7796,-2.6254 3.52024,-5.16842 4.99834,-7.53039 1.15975,-1.84067 2.34961,-3.72408 3.5013,-5.58768 1.1517,-1.86359 2.26503,-3.70745 3.27154,-5.46912 1.00644,-1.76157 1.90614,-3.44102 2.6305,-4.97582 0.72435,-1.5348 1.27345,-2.92502 1.57864,-4.1082 1.22063,-4.7325 0.84889,-3.95614 0.20225,-6.22176 -0.64664,-2.26553 0.8768,-3.8867 0.73731,-5.07745 -0.13949,-1.19075 -1.63821,-2.9833 -0.85587,-3.8337 2.03934,0 4.04442,0.0797 5.53288,0.0797 0.57789,-1.00075 2.13709,-4.00278 2.99884,-5.87544 0.86186,-1.87266 1.60385,-3.69599 2.28058,-5.5001 0.67653,-1.80411 1.28819,-3.58908 1.88859,-5.38493 0.60081,-1.79584 1.19006,-3.60264 1.82305,-5.45049 0.63268,-1.84794 1.29676,-3.71283 1.94987,-5.56406 0.65362,-1.85124 1.29566,-3.68883 1.88621,-5.48188 0.59085,-1.79315 1.12927,-3.54176 1.57465,-5.21524 0.44537,-1.67349 0.79708,-3.27176 1.01509,-4.7641 -0.55697,-2.00767 -2.11358,-1.70537 -3.65933,-1.79803 -0.12754,-1.30255 -0.17436,-2.65022 -0.1654,-4.0251 0.008,-1.37487 0.0698,-2.77695 0.1654,-4.1879 1.01131,0 1.94051,-0.0896 3.02585,-0.0896 0,-1.00135 -0.0399,-1.51865 -0.0399,-2.80974 1.24993,0 2.19278,0.0896 3.24196,0.0896 0.15941,-1.21366 0.40751,-3.33302 0.5719,-4.80624 0.1644,-1.47321 0.22519,-2.04821 0.34675,-3.18835 0.12154,-1.14013 0.24808,-2.3544 0.37961,-3.63282 0.13151,-1.27853 0.26701,-2.62113 0.40651,-4.01823 0.13948,-1.39699 0.20923,-2.10042 0.42645,-4.34422 0.2172,-2.24381 0.58983,-6.1613 0.89173,-9.42996 0.30189,-3.26855 0.60579,-6.63615 0.9027,-10.02367 0.29792,-3.38763 0.58885,-6.79518 0.86684,-10.14385 0.27798,-3.34867 0.54102,-6.63834 0.78214,-9.79023 0.24112,-3.15179 0.46032,-6.16577 0.64963,-8.96286 0.18931,-2.79707 0.36865,-5.72358 0.53903,-8.72681 0.16937,-3.00333 0.3298,-6.08327 0.47825,-9.18734 0.14845,-3.10405 0.28696,-6.23213 0.41449,-9.33171 0.12753,-3.09957 0.24311,-6.17055 0.34673,-9.16023 0.10364,-2.98968 0.19628,-5.89815 0.27599,-8.67272 0.0797,-2.77456 0.14746,-5.41511 0.20126,-7.86924 0.0498,-2.45404 0.0997,-4.72146 0.12356,-6.74975 0.0299,-2.02819 0.0398,-3.81715 0.0398,-5.31428 -2.01325,0 -0.85588,0.0299 -2.84501,0.0299 0,-1.41623 -0.0498,-3.28311 -0.0896,-5.18506 -0.0498,-1.90195 -0.0896,-3.83897 -0.0896,-5.39539 1.68564,0 1.43974,0.0697 1.99092,-2.07482 0,-1.28869 -1.24016,-0.99038 -1.32206,-2.41886 0,-1.48986 5.10495,-3.24724 5.10495,-4.57409 0,-1.44901 -2.80845,0.39256 -2.80845,-1.05833 0,-1.32138 2.24431,-0.7951 3.82852,-0.7951 0,-1.22483 0.009,-3.34528 0.02,-5.58719 0.009,-2.24181 0.0199,-4.60507 0.0199,-6.31543 0.54999,-0.54999 0.69845,-2.97034 0.87181,-5.2536 0.17337,-2.28326 0.37164,-4.42902 1.01997,-4.42902 0.70941,0 0.85887,2.20325 0.94953,4.52517 0.0896,2.32201 0.12255,4.7627 0.59782,5.23776 0,2.12384 -0.0698,4.44496 -0.13351,6.53413 -0.0698,2.08927 -0.13352,3.94668 -0.13352,5.14311 1.37389,0 3.74453,-0.45633 3.74453,0.7951 0,1.55133 -2.50276,0.0299 -2.50276,1.3413 -0.0598,1.55063 5.00551,3.13195 5.00551,4.47455 0,1.40098 -1.20021,1.24555 -1.11951,2.3805 0.0797,1.13486 0.22917,2.13231 2.07482,2.13231 -0.0287,3.43853 0.0376,6.87692 0.0409,10.31522 -0.39555,0 -3.5025,0.002 -3.5025,0.002 0,2.2422 0.0199,4.59192 0.0598,7.03081 0.0399,2.43879 0.0896,4.96675 0.1654,7.56527 0.0698,2.59849 0.15941,5.26774 0.26005,7.989 0.10166,2.72135 0.21621,5.49492 0.34275,8.30217 0.12654,2.80724 0.26503,5.64816 0.41249,8.50443 0.14746,2.85626 0.30489,5.72777 0.46929,8.59609 0.16439,2.86832 0.33577,5.73346 0.51312,8.57707 0.17735,2.84351 0.35968,5.6654 0.54501,8.44714 0.18532,2.78184 0.39455,5.79802 0.62172,8.96545 0.22717,3.16753 0.47228,6.4862 0.73034,9.87302 0.25806,3.38683 0.52907,6.84181 0.80705,10.28185 0.27798,3.43993 0.56394,6.86491 0.85189,10.19176 0.28795,3.32684 0.64962,7.31737 0.86384,9.60302 0.21522,2.28555 0.28596,3.00213 0.42744,4.42483 0.14149,1.42271 0.28097,2.78971 0.41847,4.09056 0.1375,1.30094 0.27301,2.53574 0.40552,3.6941 0.13252,1.15827 0.19927,1.74264 0.38858,3.23508 0.18931,1.49245 0.49121,3.63233 0.7114,4.84411 1.4529,-0.0997 1.65256,0.0199 2.33985,0.0199 0,0 0.02,1.40855 0.0498,2.14207 0.42744,0 2.01125,0.0399 3.81726,0.0399 0,1.2859 0.006,2.03467 -0.003,3.0385 -0.008,1.00383 -0.008,2.08986 0.0199,3.70477 -2.74746,0.17336 -3.82353,0.55497 -3.66421,1.91061 0.25307,1.88302 0.61675,3.75558 1.05026,5.62077 0.43341,1.86528 0.93758,3.72329 1.47063,5.57702 0.53304,1.85383 1.09499,3.70347 1.64498,5.55212 0.54999,1.84865 1.08813,3.6963 1.57316,5.54614 0.48522,1.84974 1.06501,3.65844 1.71185,5.45507 0.64663,1.79673 1.36053,3.58152 2.11328,5.38344 0.75225,1.8019 1.54445,3.62107 2.34722,5.48655 0.80307,1.86548 1.61659,3.7773 2.41359,5.76473 2.8707,0.24213 2.95519,0.274 5.9381,0.0399 1.27116,1.35724 -0.91068,2.69166 -0.69148,4.14964 0.2192,1.45807 0.80905,2.48622 0.85189,4.39425 0.0399,1.90803 -1.86269,0.56393 -1.54385,5.98005 0.0797,1.35395 0.63667,2.87459 1.5031,4.52886 0.86684,1.65425 2.04274,3.44222 3.36112,5.33062 1.31839,1.8884 2.77895,3.87744 4.2142,5.93382 1.43526,2.05638 2.84521,4.18022 4.06226,6.33844 1.21715,2.15822 2.8199,4.52827 4.53942,7.00501 1.71952,2.47686 3.55571,5.06052 5.23986,7.64587 1.68415,2.58535 3.21614,5.1724 4.32709,7.65622 1.11094,2.48384 1.80082,4.86424 1.80082,7.03641 0,0 -4.27448,0.0299 -6.74326,0 -3.88361,0.0896 -3.19255,0.0299 -6.74327,-0.001 -2.98839,0.0299 -4.49548,0 -6.74326,0 -2.30886,0.12255 -6.74327,0.004 -6.74327,0.004 0,-1.48269 -0.10365,-3.12389 -0.34075,-4.88915 -0.23714,-1.76525 -0.60678,-3.65464 -1.14014,-5.63361 -0.53305,-1.97897 -1.2294,-4.04752 -2.11846,-6.17116 -0.88876,-2.12364 -1.9709,-4.30238 -3.27523,-6.50174 -1.24327,-2.19937 -3.23279,-4.33168 -5.6951,-6.29301 -2.4622,-1.96134 -5.39728,-3.75159 -8.53183,-5.26706 -3.13445,-1.51546 -6.46837,-2.75594 -9.72825,-3.61758 -3.26,-0.86186 -6.44586,-1.34439 -9.28448,-1.34439 -2.90241,0 -5.84615,0.60777 -8.72075,1.63831 -2.87459,1.03024 -5.68005,2.48263 -8.30575,4.17136 -2.62571,1.68874 -5.07168,3.6138 -7.22739,5.58918 -2.15564,1.97539 -4.02102,4.00119 -5.48567,5.89158 -1.46455,1.8903 -2.58586,3.81138 -3.44402,5.73625 -0.85786,1.92487 -1.45319,3.85341 -1.86509,5.75856 -0.41149,1.90504 -0.64065,3.78676 -0.76719,5.61787 -0.12554,1.83111 -0.14846,3.61171 -0.14846,5.31459 0,0 -2.26004,0.0299 -6.59999,0 -3.60642,0.0896 -4.06345,0.0598 -6.60008,0 -2.53653,0.0598 -2.93249,0.12255 -6.59999,0 -4.70671,0.0598 -6.60009,0 -6.60009,0 z")
	
	}		

Source originale démo .

SVG morphing :

Vous trouverez sur ce blog un article complet sur ce sujet.