9

Я хочу повторить всю анимацию из gif

Для этого я нарисовал и даже криво сделал эту змейку но не могу понять что надо сделать что бы не было косячка в самом начале анимации и как сделать подобное свечение

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

Вот моя попытка

<svg width="400" viewBox="0 0 609.38 279.68" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(198.07 -4.5882)">
  <path d="m-70.02 279.95c-29.907-1.6357-56.417-11.813-78.052-29.964-6.0632-5.0869-13.525-13.006-18.604-19.744-15.537-20.613-24.346-44.903-26.818-73.951-0.42004-4.9366-0.41761-18.147 4e-3 -22.754 2.9007-31.687 15.735-59.855 37.48-82.258 23.29-23.995 53.139-38.262 87.048-41.607 4.5623-0.45002 18.788-0.45559 23.548-0.0092 37.496 3.5162 69.373 19.864 109.93 56.378 7.109 6.3997 16.018 14.968 28.148 27.073 10.478 10.456 13.338 13.172 13.87 13.172 0.53239 0 3.5209-2.8317 14.451-13.692 14.073-13.984 18.174-17.925 25.76-24.753 38.255-34.437 72.993-52.945 108.54-57.829 7.1174-0.97794 10.82-1.2078 19.182-1.1908 16.348 0.03321 30.326 2.3376 46.302 7.6335 20.105 6.6647 35.662 16.185 49.347 30.2 14.997 15.358 25.492 34.841 31.98 59.368 7.5177 28.42 6.5109 57.404-2.9061 83.663-8.6577 24.141-24.084 45.291-44.788 61.403-11.428 8.8942-25.715 16.572-39.736 21.355-34.463 11.756-71.614 9.3193-106.08-6.9576-14.867-7.0208-30.596-17.476-47.511-31.581-11.513-9.6-20.607-18.075-38.634-36.001-12.885-12.813-15.351-15.152-15.98-15.152-0.61733 0-1.5987 0.87823-5.7977 5.1886-11.24 11.538-29.556 29.087-39.192 37.551-23.435 20.585-44.235 34.237-65.082 42.716-14.704 5.9806-31.066 9.9048-47.493 11.391-3.2145 0.29075-15.782 0.52676-18.918 0.35525zm15.25-55.132c14.91-0.78415 27.848-4.3352 42.561-11.682 15.648-7.8134 30.032-18.303 49.609-36.178 5.8064-5.3016 31.796-31.355 32.037-32.116 0.14007-0.4413-0.27758-0.98323-2.1736-2.8205-1.2909-1.2508-8.7169-8.4734-16.502-16.05-17.427-16.96-21.976-21.222-29.501-27.639-19.76-16.851-37.606-26.987-55.329-31.426-8.7162-2.1831-14.464-2.8146-23.773-2.6117-10.632 0.23171-18.69 1.8413-28.054 5.6036-23.755 9.544-41.568 30.062-47.896 55.172-2.9576 11.735-3.2389 22.754-0.9017 35.322 2.5757 13.85 7.5166 25.444 15.278 35.851 2.9692 3.9811 9.5786 10.586 13.592 13.583 12.056 9.0014 26.49 14.144 42.02 14.972 2.11 0.11251 3.896 0.2215 3.9688 0.24221 0.0728 0.0207 2.3515-0.0791 5.0639-0.22172zm333.23-0.37342c18.216-2.3838 33.623-9.7698 46.372-22.231 6.7217-6.5698 11.946-13.698 15.886-21.675 7.9596-16.116 10.391-33.23 7.2779-51.235-3.7747-21.833-14.531-39.765-30.789-51.329-8.6978-6.1865-19.627-10.702-30.434-12.574-9.8125-1.7001-21.425-1.5954-31.709 0.28582-25.286 4.6255-49.591 18.828-79.414 46.406-9.8671 9.1243-32.017 31.525-32.017 32.379 0 0.40409 1.2235 1.7441 4.0302 4.414 2.2166 2.1086 9.0925 8.7826 15.28 14.831 17.681 17.285 24.951 23.946 34.533 31.637 17.242 13.841 33.981 22.91 49.742 26.951 5.1841 1.329 8.4804 1.8731 15.875 2.6202 2.1412 0.21635 12.524-0.108 15.367-0.48005z" />
   
  <path d="m81.643 116.42c-11.805-11.887-23.24-24.264-36.286-34.774-13.007-10.479-26.503-20.775-41.577-27.97-15.465-7.382-32.054-13.762-49.137-15.119-18.011-1.431-36.691 1.3912-53.673 7.5595-14.787 5.3711-29.333 13.443-40.065 24.946-12.842 13.764-21.634 31.697-26.458 49.893-4.1997 15.839-4.9784 33.121-1.5119 49.137 3.6236 16.742 11.206 33.393 22.679 46.113 11.753 13.031 27.976 22.352 44.601 27.97 20.856 7.0486 43.992 9.285 65.768 6.0476 21.8-3.241 42.778-12.897 61.232-24.946 19.397-12.665 33.829-31.689 49.893-48.381 11.507-11.957 33.262-37.042 33.262-37.042s34.826-40.602 55.94-56.696c17.226-13.131 36.341-24.346 56.696-31.75 22.897-8.3287 47.721-17.221 71.815-13.607 20.845 3.1267 40.692 14.93 55.94 29.482 10.786 10.294 17.607 24.533 22.679 38.554 5.2987 14.647 7.997 30.543 7.5595 46.113-0.3915 13.934-2.6636 28.443-9.0714 40.821-6.7246 12.991-17.618 23.949-29.482 32.506-15.19 10.955-32.846 20.166-51.405 22.679-23.978 3.2468-49.084-2.2907-71.815-10.583-18.92-6.9022-35.611-19.254-51.405-31.75-12.576-9.95-22.839-22.52-34.018-34.018-17.644-18.148-34.324-37.225-52.161-55.185z" fill="none" stroke="#fff" stroke-width="40" id="line" stroke-dasharray="400 1496">
    <animate attributeName="stroke-dashoffset" 
             dur="3s"
             begin="0s"
             values="-400; -1396"
             repeatCount="indefinite"/>
  </path>
 </g>
</svg>

0

2 ответа 2

15

Набросал в силу своих знаний SVG, но так и не смог задействовать <use> и избежать дублирования кода:

.infinite {
  position: relative;
  height: 320px; width: 500px;
}

.infinite svg { position: absolute; }

.gradient {
  height: 320px; width: 500px;
}
.gradient::before,
.gradient::after {
  content: "";
  position: absolute;
  top: 0; z-index: -1;
  height: 320px; width: 320px;
  animation: 4s steps(1, start) infinite;
}
.gradient::before {
  background-image: conic-gradient( from 90deg, #34ef91, #34ef4b, #63ef34, #a9ef34, #efef34, #efa934, #ef6334, #ef344b, #ef3491);
  left: 0; animation-name: before;
}
.gradient::after {
  background-image: conic-gradient( from 270deg, #34ef91, #34efd7, #34c0ef, #347aef, #3434ef, #7a34ef, #c034ef, #ef34d7, #ef3491);
  right: 0; animation-name: after;
}
@keyframes before {
  from, to { clip-path: polygon( 0px 0px, 220px 0px, 220px 160px, 320px 160px, 320px 320px, 0px 320px); }
  50% { clip-path: polygon( 0px 0px, 320px 0px, 320px 160px, 220px 160px, 220px 320px, 0px 320px); }
}
@keyframes after {
  from, to { clip-path: polygon( 60px 0px, 320px 0px, 320px 320px, 100px 320px, 100px 160px, 15px 160px); }
  50% { clip-path: polygon( 45px 160px, 100px 160px, 100px 0px, 320px 0px, 320px 320px, 45px 320px); }
}

body { margin: 0; height: 100vh; background-color: #482455; background-image: url("https://i.stack.imgur.com/m9NKc.png"), radial-gradient(#fff1, #000c); background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; display: flex; flex-flow: column; justify-content: space-around; align-items: center; overflow: hidden; }
<div class="infinite">
  <svg width="500" height="320" viewBox="0 0 500 320">
    <path d="M 70 160 A 1 1 0 1 1 250 160 A 1 1 0 0 0 430 160 A 1 1 0 0 0 250 160 A 1 1 0 0 1 70 160 Z" fill="transparent" stroke="#0003" stroke-width="50"></path>
    <mask id="mask">
      <path d="M 70 160 A 1 1 0 1 1 250 160 A 1 1 0 0 0 430 160 A 1 1 0 0 0 250 160 A 1 1 0 0 1 70 160 Z" stroke="#fff" stroke-linecap="round" stroke-dasharray="330,800" stroke-dashoffset="1130px" stroke-width="50" style="filter: blur(3px)">
        <animate attributeName="stroke-dashoffset" dur="4s" begin="0.55s" values="0;-1130px" repeatCount="indefinite" />
      </path>
    </mask>
    <foreignobject x="0" y="0" width="500" height="320" mask="url(#mask)">
      <div class="gradient"></div>
    </foreignobject>
  </svg>
  <svg width="500" height="320" viewBox="0 0 500 320" style="filter: blur(20px)">
    <mask>
      <path d="M 70 160 A 1 1 0 1 1 250 160 A 1 1 0 0 0 430 160 A 1 1 0 0 0 250 160 A 1 1 0 0 1 70 160 Z" stroke="#fff" stroke-linecap="round" stroke-dasharray="330,800" stroke-dashoffset="1130px" stroke-width="48">
        <animate attributeName="stroke-dashoffset" dur="4s" begin="0.55s" values="0;-1130px" repeatCount="indefinite" />
      </path>
    </mask>
    <foreignobject x="0" y="0" width="500" height="320" mask="url(#mask)">
      <div class="gradient"></div>
    </foreignobject>
  </svg>
</div>

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

10
  • 1
    Зачем удалять-то?
    – Qwertiy
    13 июл 2021 в 16:30
  • @Qwertiy: чтобы не отвлекал от ответов, которые максимально полно отвечают на вопрос.
    – UModeL
    13 июл 2021 в 16:37
  • 1
    @UModeL ни чего не удаляй...хоть мой вопрос носит чисто познавательный характер и я ещё на этот вопрос объявлю конкурс 13 июл 2021 в 17:09
  • @Leonid: наверное можно, не проверял. Да и хотелось на коде как-то сэкономить. Изучать тут особо нечего, ибо "костыль", так как SVG странно ведёт себя с position и 3d-transform - с ними кода было бы меньше и было бы наиболее правильно.
    – UModeL
    13 июл 2021 в 17:10
  • 1
    фенкс - экселент резалт 14 июл 2021 в 2:47
8
+250

Вариация на тему на SVG:

body {
    background: #210E3F;
}
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="background: #210E3F"
     viewBox="0 0 100 100"
>
    <!--Градиент-->
    <linearGradient id="linear-gradient">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
    </linearGradient>

    <!--Иконка-->
    <symbol id="infinite" viewBox="0 0 100 110">
        <path fill="none"
              stroke-width="12"
              stroke-linecap="round"
              d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
        />
    </symbol>

    <!--Фон-->
    <use xlink:href="#infinite"
         stroke="#0D0C2F"
    />

    <!--Анимация-->
    <use xlink:href="#infinite"
         style="filter: blur(1px)"
         stroke="url(#linear-gradient)"
         stroke-dasharray="128 128"
    >
        <animate attributeName="stroke-dashoffset"
                 repeatCount="indefinite"
                 dur="5s"
                 values="0;256"
        />
    </use>
</svg>

1
  • спасибо - отличный пример ... 20 июл 2021 в 1:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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