Code Ready | Frontend

✅ Как сделать эластичную SVG анимацию?



Если говорить подробно, SVG — это мощный текстовый эффект CSS. Он предоставляет вам возможность выделить ваш текст, добавив эффекты к контуру и фону текста. ⬇️



☑️ Сначала будет показан контур вашего текста, чтобы люди могли узнать его содержание, а затем фон. Он работает постоянно, чтобы вы могли привлечь больше внимания посетителей вашего сайта.



Мы сделали HTML & SCSS код ниже, чтобы вы смогли добавить SVG эффект прямо себе на сайт:

<svg viewbox="0 0 800 600">

    <symbol id="s-text">

      <text text-anchor="middle"

            x="50%"

            y="35%"

            class="text--line">

        Elastic

      </text>

    </symbol>

    <g class="g-ants">

      <use xlink:href="#s-text"

        class="text-copy"></use>     

      <use xlink:href="#s-text"

        class="text-copy"></use>     

      <use xlink:href="#s-text"

        class="text-copy"></use>     

      <use xlink:href="#s-text"

        class="text-copy"></use>     

      <use xlink:href="#s-text"

        class="text-copy"></use>     

    </g>

  </svg>

$colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798;

body {

  background: hsl(200,70,11);

  background-size: .12em 100%;

  font: 10em/1 Arial;

}

svg {

  position: absolute;

  width: 100%;

  height: 100%;

  }



$max: 5;

$stroke-step: 7%; 

.text-copy {

  fill: none;

  stroke: white;

  stroke-dasharray: $stroke-step $stroke-step * ($max - 1);

  stroke-width: 3px;

  animation: stroke-offset 9s infinite linear;

  @for $item from 1 through $max {

    $stroke-color: nth($colors, $item);

    &:nth-child(#{$item}) {

      stroke: $stroke-color;

      stroke-dashoffset: $stroke-step * $item;

      }

    }

  }

@keyframes stroke-offset {

  50% {

    stroke-dashoffset: $stroke-step * $max;  

    stroke-dasharray: 0 $stroke-step * $max*2.5;

  }

}

@code_ready | #практика #html #scss