Есть такая анимация, выполнена с помощью плагина TweenMax:
//OVERLAY
var trigger = $('#trigger');
var close = $('#close');
var tl = new TimelineMax({
paused: false, yoyo: true, repeat:-1, delay: 0
});
TweenMax.set("path", {scale: 0, transformOrigin: "center center"});
tl.to("#start-4", 1, {
morphSVG: "#start-1",
scale: .25,
ease: Power0.easeNone,
//fill: "#F40B37",
})
.to("#start-4", 1, {
morphSVG: "#start-2",
scale: .5,
ease: Power0.easeNone,
//fill: "#F40B37",
})
.to("#start-4", 1, {
morphSVG: "#start-5",
scale: 1,
ease: Power0.easeNone,
//fill: "#F40B37",
})
.to("#start-4", 1, {
morphSVG: "#start-3",
scale: 2,
ease: Power0.easeNone,
//fill: "#F40B37",
});
// tl.pause();
// trigger.on('click', openOverlay);
// close.on('click', closeOverlay);
function openOverlay(){
tl.play();
}
function closeOverlay(){
tl.reverse();
}
/*Overlay styles*/
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#start-1, #start-2, #start-3, #start-5 {
visibility: hidden;
z-index: 1;
display: none;
}
#trigger {
display: block;
position: absolute;
top: 0px;
right: 0px;
margin: 0 auto;
}
#close {
display: block;
position: absolute;
bottom: 0px;
right: 0px;
margin: 0 auto;
}
svg {
width: 100%;
height: 100%;
}
svg path {
fill: #F40B37 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<!--Overlay-->
<button id="trigger">Open</button>
<button id="close">Close</button>
<svg class="overlay" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="170px" height="170px" viewBox="0 0 170 170">
<path id="start-1" fill="#52AC62" stroke="#000000" stroke-miterlimit="10" d="M14.923,51.201c2.988-0.742,3.99-2.748,5.161-5.603
c1.058-2.579,3.033-5.813,3.236-7.994c0.485-5.217,0.043-15.378,5.651-17.536c3.636-1.399,8.47,2.513,11.415,3.577
c4.348,1.57,7.71-6.052,10.883-8.832c2.37-2.077,6.069-2.588,8.079-5.083c2.222-2.759,5.738-3.773,8.563-5.655
c2.862-1.904,3.764-0.895,7.431-1.048c3.817-0.16,5.944,1.501,9.435,2.263c3.331,0.726,6.87,0.041,10.285,0.324
c3.674,0.305,7.466,1.455,10.497,3.309c6.218,3.803,11.5,3.126,18.586,3.799c7.848,0.746,10.848,5.583,12.917,12.693
c1.952,6.705,1.176,12.804,8.411,16.318c3.15,1.53,6.96,2.085,9.706,4.186c2.812,2.151,3.569,5.483,4.758,8.552
c2.267,5.848,2.577,12.279,4.029,18.358c1.651,6.919,2.311,11.566,0.907,18.744c-0.597,3.047-1.133,5.983-2.902,8.41
c-2.004,2.748-4.295,4.57-5.743,7.73c-2.89,6.303-4.656,12.553-7.449,19.074c-2.499,5.831-5.782,11.307-9.462,16.425
c-1.92,2.672-4.624,4.454-7.712,5.575c-2.077,0.752-4.152,0.817-6.066,2.237c-1.189,0.881-1.786,2.293-3,3.012
c-2.518,1.491-5.943,0.834-8.732,1.197c-3.392,0.441-5.9-0.031-8.085,1.932c-2.416,2.172-4.453,2.495-7.109,4.438
c-3.866,2.827-5.917,4.63-10.745,2.914c-3.865-1.372-7.096-2.374-11.311-0.89c-2.414,0.851-4.251,3.538-6.544,3.474
c-2.505-0.07-10.564-3.784-13.33-5.252c-2.68-1.421-4.264-2.59-6.867-4.362c-5.623-3.828-7.386-5.923-13.896-7.194
c-3.162-0.617-8.052-1.164-10.019-3.855c-2.463-3.369,0.53-8.03-2.651-10.27c-6.558-4.617-7.133-9.071-10.018-13.314
c-1.467-2.157-4.117-5.113-4.774-7.433c-0.745-2.631,0.205-6.455,0.33-8.977c0.235-4.776-1.453-7.479-2.994-11.569
c-1.364-3.617-1.889-8.868-0.971-12.933c1.148-5.081,3.57-10.717,2.498-15.826c-0.996-4.744-3.107-5.69-2.388-11.067
c2.065-3.473,7.046-3.829,10.634-3.871"/>
<path id="start-2" fill="#FFF343" stroke="#000000" stroke-miterlimit="10" d="M7.512,76.449c0.45-8.144,2.827-15.645,9.393-21.093
c4.418-3.667,9.011-4.73,12.891-9.345c2.628-3.125,5.293-6.05,7.524-9.502c2.064-3.194,2.932-7.135,4.896-10.395
c2.824-4.688,5.656-4.741,10.691-5.114c4.353-0.323,6.286-0.83,10.144-2.784c4.665-2.362,7.547-3.434,12.651-3.435
c3.428-0.001,7.384,0.579,10.761,0.008c5.142-0.87,9.252-3.657,14.909-3.118c5.167,0.494,10.335,3.579,14.39,6.834
c3.588,2.882,5.82,6.917,10.083,9.075c3.989,2.019,8.757,3.976,13.017,5.58c3.082,1.159,7.814,2.686,10.029,5.276
c4.707,5.504,2.894,14.024,6.661,19.874c3.791,5.89,8.426,11.497,6.477,18.978c-0.594,2.271-2.206,4.038-2.684,6.25
c-0.367,1.699-0.11,3.725-0.356,5.443c-0.468,3.26-1.478,6.032-1.795,9.405c-0.373,3.964-1.176,7.843-1.66,11.746
c-0.407,3.254,0.951,7.256,0.035,10.374c-1.183,4.028-6.489,5.559-9.891,7.102c-1.876,0.851-4.109,1.53-5.768,2.823
c-1.651,1.289-2.545,3.228-4.295,4.239c-3.635,2.103-7.167,3.099-10.062,6.651c-2.658,3.266-2.216,7.714-3.767,11.322
c-4.042,9.411-13.359,4.774-21.163,3.362c-7.329-1.325-15.369-0.612-22.757-0.271c-5.625,0.261-11.407-0.506-17.018-0.024
c-3.014,0.258-3.961,1.082-6.17-0.754c-3.551-2.948-5.876-11.118-8.055-15.49c-3.782-7.592-8.147-14.085-15.367-18.701
c-3.693-2.36-7.471-4.982-11.145-7.516c-3.349-2.311-7.848-4.413-9.604-8.224c-4.475-9.71,6.007-8.155,11.758-9.836
c3.003-0.879,6.63-4.305,5.389-7.859c-1.065-3.052-7.149-2.712-9.951-3.11C12.244,83.446,10.273,82.548,7.512,76.449"/>
<path id="start-3" fill="#D24A43" stroke="#000000" stroke-miterlimit="10" d="M17.874,124.296c-1.827-0.743-1.694-7.781-2.554-10.107
c-1.585-4.293-4.309-7.507-6.37-11.245c-1.813-3.286-1.73-7.175-1.716-11.087c0.018-4.6-1.277-8.519-1.701-13.076
c-0.421-4.531,2.179-7.621,3.712-11.601c1.911-4.964,3.651-10.337,6.522-14.831c3.387-5.298,9.049-3.746,14.086-7.576
c3.569-2.714,5.293-6.121,6.746-10.193c1.558-4.366,1.909-8.951,6.034-11.648c4.203-2.748,9.052-0.949,13.641-1.952
c5.958-1.302,8.593-5.828,13.522-7.787c4.862-1.93,10.139,1.256,15.021,0.375c4.643-0.838,7.103-4.105,12.292-3.364
c4.623,0.661,11.456,5.96,16.098,6.842c9.034,1.717,16.13-3.378,22.981,5.107c2.99,3.702-0.266,6.834,3.83,10.214
c4.036,3.329,10.583,7.672,13.62,12.13c5.561,8.157,9.893,13.69,10.853,23.195c0.36,3.57-3.967,10.129-4.682,13.617
c-0.906,4.41-2.125,6.809-2.341,11.814c-0.183,4.209,0.212,8.357,0.425,12.446c0.3,5.747-2.751,7.936-3.852,13.194
c-0.564,2.693,0.216,3.533-1.809,5.886c-1.535,1.784-4.121,1.88-5.507,3.998c-2.061,3.149-5.766,8.779-6.069,12.665
c-0.495,6.318-0.735,9.27-7.022,12.342c-4.283,2.094-9.701,3.206-14.47,3.404c-5.207,0.217-5.39,0.947-10.427,1.276
c-5.585,0.364-13.936,2.24-19.354,1.317c-10.016-1.705-19.096-3.062-29.589-3.02c-6.194,0.025-8.89-1.298-11.524-6.737
c-2.417-4.993-6.288-8.909-9.109-13.673c-2.097-3.541-4.516-8.226-8.307-10.232c-3.529-1.869-10.427-0.852-13.832-1.694"/>
<path id="start-4" fill="#6558A0" stroke="#000000" stroke-miterlimit="10" d="M20.758,115.292c-1.193,0.02,0.61,0.135-0.58-0.132
c-3.398-11.825-10.059-23.922-9-37.212c1.1-13.835,10.051-16.348,17.031-24.507c7.069-8.264,10.822-18.573,19.16-24.775
c7.271-5.407,17.401-5.04,25.387-7.158c11.014-2.917,17.839-9.469,28.498-14.413c14.479-6.717,7.911,6.418,15.567,19.119
c14.864,24.652,40.51,10.604,45.67,49.094c3.712,27.69-12.301,26.734-28.64,31.256c-17.959,4.97-30.88,13.657-42.44,32.525
c-11.17,18.233-21.476,19.114-37.871,13.229C36.105,146.06,28.542,135.99,20.758,115.292"/>
<path id="start-5" fill="#D7569C" stroke="#000000" stroke-miterlimit="10" d="M16.563,122.124c0.376-1.767-4.278-8.624-3.268-11.312
c-3.398-11.825,2.774-13.374,3.833-26.665c1.1-13.835-3.646-32.174,3.333-40.333c7.069-8.264,18.365-4.071,26.703-10.273
c7.271-5.407,9.645-21.271,17.63-23.389c11.014-2.917,25.597,6.763,36.255,1.818c14.479-6.717,21.756,3.477,29.412,16.177
c14.865,24.652,26.664,13.545,31.824,52.035c3.713,27.69-17.719,37.239-24.824,52.632c-10,21.667-18.439-1.535-30,17.333
c-11.17,18.233-36.939,2.553-53.333-3.333c-17.435-6.258-37.659-2.354-37.567-25.002"/>
</svg>
Не могу решить проблему плавности перехода от одной фигуры к другой.
Вопрос: как для данной анимации можно решить проблему плавности? В идеале хотелось бы иметь вид растекающейся жидкости или хотя бы плавность как тут, потому что сейчас каждый шаг сильно заметен,- при изменении состояния и увеличении размеров фигуры.
P.S: Эффект должен быть, как если бы эмалевую краску (вязкую жидкость) вылили на стол. В конце должен быть залит весь экран.