Question

Есть код) Хочу чтоб так одображалось лого сайта https://codepen.io/yoksel/pen/XJbzrO

куда воткнуть этот код?))

HTML, BODY {
  height: 100%;
  }

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

BODY {
  background: hsl(200,70,11);
  background-size: .12em 100%;
  font: 16em/1 Arial;
}

.text--line {
  font-size: .5em;
  }

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;
  }
}

Answer 1

Вставить в редакторе в режиме редактирования HTML кода код вида:

 

код

<svg viewbox="0 0 800 600"> <symbol id="s-text"> <text class="text--line" text-anchor="middle" x="50%" y="35%"> Elastic </text> <text class="text--line2" text-anchor="middle" x="50%" y="68%"> Stroke </text> </symbol> <g class="g-ants"> <use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use> <use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use> <use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use> <use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use> <use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use> </g> </svg>

<style type="text/css">.text--line {
 font-size: .5em;
}

svg {
 position: absolute;
 width: 100%;
 height: 100%;
}

.text-copy {
 fill: none;
 stroke: white;
 stroke-dasharray: 7% 28%;
 stroke-width: 3px;
 -webkit-animation: stroke-offset 9s infinite linear;
 animation: stroke-offset 9s infinite linear;
}
.text-copy:nth-child(1) {
 stroke: #360745;
 stroke-dashoffset: 7%;
}
.text-copy:nth-child(2) {
 stroke: #D61C59;
 stroke-dashoffset: 14%;
}
.text-copy:nth-child(3) {
 stroke: #E7D84B;
 stroke-dashoffset: 21%;
}
.text-copy:nth-child(4) {
 stroke: #EFEAC5;
 stroke-dashoffset: 28%;
}
.text-copy:nth-child(5) {
 stroke: #1B8798;
 stroke-dashoffset: 35%;
}

@-webkit-keyframes stroke-offset {
 50% {
 stroke-dashoffset: 35%;
 stroke-dasharray: 0 87.5%;
 }
}

@keyframes stroke-offset {
 50% {
 stroke-dashoffset: 35%;
 stroke-dasharray: 0 87.5%;
 }
}
</style>

 

Comments

Вставить в редакторе в режиме редактирования HTML кода код вида... это где этот редактор?)

---

Дмитрий Сергеевич #2,

Смотрите на скриншот http://joxi.ru/nAyvz0ZCX71q7r только идеально работать тот скрипт не будет

---

Дмитрий Сергеевич #2,

А что если сделать GIF анимацию, и уже через картинку впихнуть?(если так можно :) )

---

FKMG Project,

Можете сделать гиф анимацию, так даже проще будет и без большого количества кода как в примере выше.