3

Пытаюсь придумать способ повторяемой анимации с паузами. Но пока в тупике.

EDIT

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

Нужен следующий эффект

По буквам "SVG" раз в 10 секунд должна пробегать ярко-голубая линия (можно две разные, как на изображении), с наклоном в 125⁰ - на рисунке черная линия указывает примерный угол. Красная стрелка - указывает направление скольжения линий. Линии должны "пробегать" быстро, пусть за 1 секунду.

Уверен, что это как-то можно сделать. Но пока фантазии не хватает. Может как-то можно использовать наложение слоев в виде маски и использовать z-index? Прошу помощи, прошу идей.

2
  • То есть, как традиционный блик по кнопке, только по бордеру букв?
    – UModeL
    Commented 16 авг. 2021 в 17:28
  • 1
    Я отредактировал свой вопрос - уточнил детали.
    – Majestio
    Commented 16 авг. 2021 в 22:47

3 ответа 3

4

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

Работа с линейными SVG-градиентами схожа с подобными градиентами в CSS, за исключением того, что в CSS перечисление идёт через запятую, а в SVG - в специальных вложенных тегах.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-8 0 195 82">
  <defs>
    <!-- Градиент. Угол можно менять через "x" и "y" -->
    <linearGradient id="beam" x1="0" y1=".1" x2="1" y2="0">
      <stop offset="0%" stop-color="#005A9C" />
      <stop offset="41%" stop-color="#005A9C" />
      <!-- Широкая полоса -->
      <stop offset="42%" stop-color="#7edcff" />
      <stop offset="50%" stop-color="#7edcff" />
      <!-- Промежуток между полосами -->
      <stop offset="51%" stop-color="#005A9C" />
      <stop offset="54%" stop-color="#005A9C" />
      <!-- Узкая полоса -->
      <stop offset="55%" stop-color="#7edcff" />
      <stop offset="58%" stop-color="#7edcff" />

      <stop offset="59%" stop-color="#005A9C" />
      <stop offset="100%" stop-color="#005A9C" />
      <!-- Анимация градиента -->
      <animateTransform id="blink" attributeName="gradientTransform" type="translate" from="-1 0" to="1 0" begin="0s;blink.end+5s" dur="1s" fill="freeze" />
    </linearGradient>
    <!-- Контур для букв -->
    <path id="SVG" d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z" />
    <!-- Маска для букв. Если анимируется обводка, то обрезает внешнюю часть обводки. Иначе, можно удалить. -->
    <clipPath id="clip">
      <use xlink:href="#SVG" />
    </clipPath>
  </defs>
  <!-- SVG-звезда -->
  <g id="logo" transform="translate(-2, -4)">
    <path d="m 32.195312,16.595703 a 5.380104,5.380104 0 0 0 0,7.609375 v 11.009766 l -7.785156,-7.785156 a 5.380104,5.380104 0 1 0 -5.380859,5.378906 l 7.785156,7.787109 H 15.804688 a 5.380104,5.380104 0 1 0 0,7.609375 h 11.009765 l -7.785156,7.785156 a 5.380104,5.380104 0 1 0 5.380859,5.38086 l 7.785156,-7.785156 v 11.009765 a 5.380104,5.380104 0 1 0 7.609376,0 V 53.585938 l 7.785156,7.785156 a 5.380104,5.380104 0 1 0 5.380859,-5.38086 l -7.785156,-7.785156 h 11.009765 a 5.380104,5.380104 0 1 0 0,-7.609375 H 45.181641 l 7.789062,-7.787109 a 5.380104,5.380104 0 1 0 -5.380859,-5.378906 l -7.785156,7.785156 V 24.205078 a 5.380641,5.380641 0 0 0 -7.609376,-7.609375 z" stroke-width="8" stroke="#000" />
    <path d="m 32.194937,16.594937 a 5.380104,5.380104 0 0 0 0,7.609375 v 11.009765 l -7.785156,-7.785155 a 5.380104,5.380104 0 1 0 -5.380859,5.378905 l 7.785155,7.787112 H 15.804313 a 5.380104,5.380104 0 1 0 0,7.609373 h 11.009764 l -7.785155,7.785158 a 5.380104,5.380104 0 1 0 5.380859,5.38086 l 7.785156,-7.785156 v 11.00976 a 5.380104,5.380104 0 1 0 7.609375,0 v -11.00976 l 7.785156,7.785156 a 5.380104,5.380104 0 1 0 5.38086,-5.38086 l -7.785156,-7.785158 h 11.009765 a 5.380104,5.380104 0 1 0 0,-7.609375 h -11.01367 l 7.789061,-7.78711 a 5.380104,5.380104 0 1 0 -5.38086,-5.378905 l -7.785156,7.785155 V 24.204312 a 5.3806411,5.3806411 0 0 0 -7.609375,-7.609375 z" fill="#FFB13B" />
  </g>
  <!-- Буквы с пробегающими бликами... -->
  <g transform="translate(68,9)">
    <!-- ... по заливке -->
    <use xlink:href="#SVG" fill="url(#beam)" />
    <!-- ... по обводке (раскомментируйте следующую строку и, наоборот, закомментируйте предыдущую)
    <use xlink:href="#SVG" fill="#005A9C" stroke-width="4" stroke="url(#beam)" clip-path="url(#clip)" /> -->
  </g>
</svg>

2
  • 1
    Супер!!! Все именно то, что нужно!!!Я Спасибище огромное - вы зе бест!!! )))
    – Majestio
    Commented 18 авг. 2021 в 0:04
  • @Majestio: Был рад помочь. Сам изучаю SVG потихоньку :)
    – UModeL
    Commented 18 авг. 2021 в 0:09
4

Для анимации необходимо перевести растровую картинку в вектор.
Эмблема SVG в векторном виде легко находится в поисковиках.

Буквы SVG набраны в векторном редакторе : F8
Path каждой буквы получен после выбора пункта меню: контур / оконтурить объект Shift+Ctrl+C

Итого получилось

<svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 768 256" >
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>
</g>  
           <!-- Буквы S V G -->
<g aria-label="SVG" >
<path d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>
</svg>

Бегущая полоса

Для реализации используется анимация SVG градиента:

  <!-- анимация бегущей полосы      -->
     <animateTransform id="anT" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="0s;anT.end+2s"
        dur="5s"
         fill="freeze"
         repeatCount="1"        
        />

Я сделал паузу между циклами повторения анимации градиента равной 2s, если нужна пауза 10s просто измените на 10s

<svg xmlns="http://www.w3.org/2000/svg" width="75%" height="75%" viewBox="0 0 768 256" >
<defs>
    <linearGradient id="Lg" x2="1" y2="1" >
      <stop offset="0%" stop-color="black" />
      <stop offset="33%" stop-color="black" />
      <stop offset="50%" stop-color="blue" />
      <stop offset="56%" stop-color="black" />
      <stop offset="100%" stop-color="black" />
        <!-- анимация бегущей полосы      -->
     <animateTransform id="anT" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="0s"
        dur="5s"
         fill="freeze"
         repeatCount="indefinite"       
        />
    </linearGradient>
  </defs> 
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>

</g>  
           <!-- Буквы S V G -->
<g aria-label="SVG" fill="url(#Lg)">
<path d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>
</svg>

Бегущая полоса + вращение логотипа

При желании можно сделать анимацию немного сложнее, добавив анимацию вращения логотипа:

<animateTransform id="anR"
   attributeName="transform"
   type="rotate"
   begin="anT.end+1s"
   dur="2s"
   values="0 128 127.4;360 128 127.4"  />

Координаты центра вращения получены с помощью метода getBBox()

Последовательность запуска анимаций обеспечивает условие: begin="anT.end+1s" Буквально его можно прочесть так, - после окончания анимации градиента id="anT" через секунду запускается анимация вращения логотипа.

<svg xmlns="http://www.w3.org/2000/svg"width="75%" height="75%" viewBox="0 0 768 256" >
<defs>
    <linearGradient id="Lg" x2="1" y2="1" >
      <stop offset="0%" stop-color="black" />
      <stop offset="33%" stop-color="black" />
      <stop offset="50%" stop-color="blue" />
      <stop offset="56%" stop-color="black" />
      <stop offset="100%" stop-color="black" />
        <!-- анимация бегущей полосы      -->
     <animateTransform id="anT" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="0s;anR.end"
        dur="3s"
         fill="freeze"      
        />
    </linearGradient>
  </defs> 
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>
             <!-- Анимация вращения логотипа -->
 <animateTransform id="anR"
   attributeName="transform"
   type="rotate"
   begin="anT.end+1s"
   dur="2s"
   values="0 128 127.4;360 128 127.4"  />
</g>  
           <!-- Буквы S V G -->
<g aria-label="SVG" fill="url(#Lg)">
<path d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>
</svg>

<script>
let  bb = logo.getBBox();
console.log(bb.x + bb.width /2);
console.log(bb.y + bb.height /2);
</script>

1
  • Большое спасибо за ваши труды! Плюсанул. Но ответ не принял. Хочется немного другого. Я отредактировал свой вопрос для уточнения деталей. И да ... нужны "строгие" линии, не градиент.
    – Majestio
    Commented 16 авг. 2021 в 22:39
4

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

Решение

Линия пробегает буквы SVG за 1s. пауза - 10s, далее цикл повторяется

begin="svg1.click;anT.end+10s"

Для решения использованы два векторных слоя букв и маска

  • Верхний слой тёмно синий
  • Нижний слой ярко синий
  • Маска имеет форму ярких полосок, как на рисунке выше
  • При анимации движения маски, верхний тёмный слой прорезается до нижнего ярко синего слоя

Ниже полный код, анимация начнется после клика

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="75%" height="75%" viewBox="0 0 768 256" >
<defs>
  <mask id="mask" > 
    <rect width="100%" height="100%" fill="white" />
   <g fill="black" transform="translate(-120,0)" >
        <path d="m 306.02887,0.3267 15.42095,0 93.19595,256.05376 -15.2786,0.39113 z"/> 
              <path d="m 326.91668,0.3267 5.69646,0 93.18401,256.02097 -5.52528,0.47033 z"/> 
             <!-- Анимация движения маски    -->
    <animateTransform id="anT"
        attributeName="transform"
        type="translate"
        begin="svg1.click;anT.end+10s"
        dur="1s"
        values="-95,0;400,0"
        restart="whenNotActive"/>
      
    </g> 
  </mask>  
</defs> 
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>
      
</g>  
           <!-- Буквы S V G  нижний слой--> 
<g>
<path fill=" #7edcff" d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>           
         <!-- Буквы S V G  верхнй слой--> 
    <g mask="url(#mask)" >
    <path fill="#005aa0" d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
    </g>
</svg>

Мне больше нравится вариант, когда полоса бежит немного медленней - 2s и паузы между повторениями равны - begin="svg1.click;anT.end+3s"

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="75%" height="75%" viewBox="0 0 768 256" >
<defs>
  <mask id="mask" > 
    <rect width="100%" height="100%" fill="white" />
   <g fill="black" transform="translate(-120,0)" >
        <path d="m 306.02887,0.3267 15.42095,0 93.19595,256.05376 -15.2786,0.39113 z"/> 
              <path d="m 326.91668,0.3267 5.69646,0 93.18401,256.02097 -5.52528,0.47033 z"/> 
             <!-- Анимация движения маски    -->
    <animateTransform id="anT"
        attributeName="transform"
        type="translate"
        begin="svg1.click;anT.end+3s"
        dur="2s"
        values="-95,0;400,0"
        restart="whenNotActive"/>
      
    </g> 
  </mask>  
</defs> 
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>
      
</g>  
           <!-- Буквы S V G  нижний слой--> 
<g>
<path fill=" #7edcff" d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>           
         <!-- Буквы S V G  верхнй слой--> 
    <g mask="url(#mask)" >
    <path fill="#005aa0" d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
    </g>
</svg>

6
  • Саша привет...всегда хотел узнать - для чего ты пишешь несколько ответов в одном вопросе ? Commented 17 авг. 2021 в 7:51
  • 1
    @MaximLensky оба ответа достаточно сложные, объемные, решения разные и не стоит мешать их в одну кучу. У меня встречный вопрос, когда ты перестанешь цепляться ко мне, честно говоря надоело. При желании найду твои ответы, где в одном вопросе у тебя не два ответа, а немного больше. Commented 17 авг. 2021 в 7:58
  • да я же не цепляюсь - просто пишу когда что то не работает и всё .. без подколок .. ты меня не верно понял Commented 17 авг. 2021 в 8:04
  • 1
    Alexandr_TT,сорян, дружище - я "принял" последний ответ - тут такие "правила игры! Спатибище тебе большое!!!
    – Majestio
    Commented 18 авг. 2021 в 0:13
  • 1
    Ok, я постараюсь)
    – Majestio
    Commented 18 авг. 2021 в 8:56

Ваш ответ

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

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