1

введите сюда описание изображения

не понимаю как мне трансформировать один свг в другой. Вот из первого кадра нужен второй

могу приложить кодом свг файлы

Первый нижний:

<svg width="378" height="458" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M27.168 205.764c0 67.736-22.168 226.273 84.063 226.273 187.269 0 235.216-28.772 235.216-126.31 0-97.537 55.553-280.17-159.295-280.17-149.49 0-159.984 76.943-159.984 180.207Z" fill="#0DCAF0"/></g><defs><filter id="a" x=".246" y=".557" width="377.655" height="456.48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_53_30"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_53_30" result="shape"/></filter></defs></svg> 

Первый верхний:

<svg width="334" height="366" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M29.692 169.11c0 68.39-38.192 169.603 125.481 169.603C297 353.5 306.942 285.766 306.942 206.633 306.942 127.5 334.5 38 181.961 26.523 107 20.883 37.5 26.523 29.692 169.11Z" fill="#FA00FF"/></g><defs><filter id="a" x=".825" y=".163" width="333.059" height="365.592" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_53_33"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_53_33" result="shape"/></filter></defs></svg> 

Второй верхний:

<svg width="351" height="387" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M46.692 181.11c-26.06 111.558-60.676 114.224 125.481 169.603C316 393.5 323.943 297.766 323.943 218.633 323.943 139.5 352 91 198.961 38.523 97 3.561 80 38.523 46.692 181.11Z" fill="#FA00FF"/></g><defs><filter id="a" x=".858" y=".949" width="350.104" height="385.338" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_53_40"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_53_40" result="shape"/></filter></defs></svg> 

Второй нижний:

<svg width="397" height="475" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M27.168 212.764c0 77.736-19.44 202.353 84.064 226.273C275.5 477 308.5 405 346.447 312.727 384.393 220.454 408-20 187.152 32.557 41.723 67.167 27.168 28.663 27.168 212.764Z" fill="#0DCAF0"/></g><defs><filter id="a" x=".719" y=".131" width="395.437" height="474.254" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_53_37"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_53_37" result="shape"/></filter></defs></svg>
1
  • Преврати каждый в path и анимируй его.
    – Qwertiy
    8 сен в 20:39

1 ответ 1

0

#lll {
  animation: skew 10s infinite 0s linear;
}

@keyframes skew {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skewY(-15deg);
    transform: skewX(15deg);
  }
  100% {
    transform: skewY(-15deg);
  }
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>svg</title>
</head>

<body>
  <svg width="378" height="458" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" id="lll"><g filter="url(#a)"><path d="M27.168 205.764c0 67.736-22.168 226.273 84.063 226.273 187.269 0 235.216-28.772 235.216-126.31 0-97.537 55.553-280.17-159.295-280.17-149.49 0-159.984 76.943-159.984 180.207Z" fill="#0DCAF0"/></g><defs><filter id="a" x=".246" y=".557" width="377.655" height="456.48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_53_30"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_53_30" result="shape"/></filter></defs>
    <svg width="334" height="366" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 366"><g filter="url(#a)"><path d="M29.692 169.11c0 68.39-38.192 169.603 125.481 169.603C297 353.5 306.942 285.766 306.942 206.633 306.942 127.5 334.5 38 181.961 26.523 107 20.883 37.5 26.523 29.692 169.11Z" fill="#FA00FF" transform="translate(30,40)"/></g><defs><filter id="a" x=".825" y=".163" width="333.059" height="365.592" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_53_33"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_53_33" result="shape"/></filter></defs></svg>
  </svg>
</body>

</html>

Вот так это можно реализовать. Не точь в точь, как у Вас, но если поиграть с градусамии - будет похоже. Думаю, принцип Вы поняли

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.