11

У меня есть path слова stack, которые я получил с помощью векторного редактора. Я заполнил символы с помощью двухцветного градиента

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x1="%" y1="0%" x2="100%" y2="0%">
	    <stop offset="0%" stop-color="dodgerblue" />
		<stop offset="100%" stop-color="white" />
		
	   </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="skyblue" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/>
  </g>
</svg>

Как сделать анимацию переливания одного цвета в другой?

4 ответа 4

11

Как однажды @Stranger in the Q выразился: "Не в точности, но по мотивам®" =)

Вариант на CSS

Агрессивный вариант:

h1 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: center;
  font-size: 20vw;
  line-height: 90vh;
  font-family: arial, sans-serif;
  background: linear-gradient(to left, blue, red, green, yellow, chocolate, brown);
  background-size: 1000px 100%;
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: background 20s linear infinite;
}

@keyframes background {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 10000px;
  }
}
<h1>Stack</h1>

Спокойный вариант:

h1 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: center;
  font-size: 20vw;
  line-height: 90vh;
  font-family: arial, sans-serif;
  background: linear-gradient(45deg, lightgreen, aliceblue, cornflowerblue);
  background-size: auto 500%;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: background 10s ease infinite;
  background-position: center 100%;
}

@keyframes background {
  from {
    background-position: center 0;
  }
  50% {
    background-position: center 100%;
  }
  to {
    background-position: center 0;
  }
}
<h1>Stack</h1>

Вариант с однотипной анимацией для каждой буквы отдельно:

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
h1 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: center;
  font-size: 20vw;
  line-height: 90vh;
  font-family: 'Rubik Mono One', sans-serif;
}

h1>span {
  background: linear-gradient(to left, brown, red, green, yellow, chocolate, brown);
  background-size: 100% 1000px;
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: background 20s linear infinite;
}

@keyframes background {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 2000px;
  }
}
<h1><span>S</span><span>t</span><span>a</span><span>c</span><span>k</span></h1>

Вариант с индивидуальной для каждой буквы анимацией:

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
h1 {
  position: relative;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: left;
  font-size: 20vw;
  line-height: 90vh;
  font-family: 'Rubik Mono One', sans-serif;
  color: white;
}

h1>span {
  opacity: 0;
}

h1>span:nth-child(1) {
  background: linear-gradient(to left, brown, red, green, yellow, chocolate, brown);
  animation: fade 2s linear 0s forwards, background 30s linear infinite;
}

h1>span:nth-child(2) {
  background: linear-gradient(to left, darkorange, deeppink, lavender, fuchsia, sienna, darkorange);
  animation: fade 2s linear 2s forwards, background 30s linear infinite;
}

h1>span:nth-child(3) {
  background: linear-gradient(to left, gray, thistle, white, black, lightgray, gray);
  animation: fade 2s linear 4s forwards, background 30s linear infinite;
}

h1>span:nth-child(4) {
  background: linear-gradient(to left, aqua, antiquewhite, cadetblue, chartreuse, crimson, aqua);
  animation: fade 2s linear 6s forwards, background 30s linear infinite;
}

h1>span:nth-child(5) {
  background: linear-gradient(to left, blue, yellow, springgreen, sandybrown, purple, blue);
  animation: fade 2s linear 8s forwards, background 30s linear infinite;
}

h1>span:nth-child(1),
h1>span:nth-child(2),
h1>span:nth-child(3),
h1>span:nth-child(4),
h1>span:nth-child(5) {
  background-size: 200% 200%;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes background {
  0% {
    background-position: 0;
    background-size: 100% 1000px;
  }
  100% {
    background-position: 2000px;
    background-size: 100% 1000px;
  }
}
<h1><span>S</span><span>t</span><span>a</span><span>c</span><span>k</span></h1>

Вариант а-ля 3DFire :)

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
h1 {
  position: relative;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: left;
  font-size: 20vw;
  line-height: 90vh;
  font-family: 'Rubik Mono One', sans-serif;
  color: white;
}

h2 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: left;
  font-size: 20vw;
  line-height: 90vh;
  font-family: 'Rubik Mono One', sans-serif;
  color: white;
  background: linear-gradient(45deg, lightgreen, aliceblue, cornflowerblue);
  background-size: auto 500%;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: background_h 5s ease infinite;
  background-position: center 100%;
}

h1>span {
  opacity: 0;
}

h1>span:nth-child(1) {
  background: linear-gradient(to left, brown, red, green, yellow, chocolate, brown);
  animation: fade 2s linear 0s forwards, background 20s linear infinite;
}

h1>span:nth-child(2) {
  background: linear-gradient(to left, darkorange, deeppink, lavender, fuchsia, sienna, darkorange);
  animation: fade 2s linear 1s forwards, background 20s linear infinite;
}

h1>span:nth-child(3) {
  background: linear-gradient(to left, gray, thistle, white, black, lightgray, gray);
  animation: fade 2s linear 2s forwards, background 20s linear infinite;
}

h1>span:nth-child(4) {
  background: linear-gradient(to left, aqua, antiquewhite, cadetblue, chartreuse, crimson, aqua);
  animation: fade 2s linear 3s forwards, background 20s linear infinite;
}

h1>span:nth-child(5) {
  background: linear-gradient(to left, blue, yellow, springgreen, sandybrown, purple, blue);
  animation: fade 2s linear 4s forwards, background 20s linear infinite;
}

h1>span:nth-child(1),
h1>span:nth-child(2),
h1>span:nth-child(3),
h1>span:nth-child(4),
h1>span:nth-child(5) {
  background-size: 200% 200%;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes background {
  0% {
    background-position: 0;
    background-size: 100% 1000px;
  }
  100% {
    background-position: 2000px;
    background-size: 100% 1000px;
  }
}

@keyframes background_h {
  from {
    background-position: center 0;
  }
  50% {
    background-position: center 100%;
  }
  to {
    background-position: center 0;
  }
}
<h1><span>S</span><span>t</span><span>a</span><span>c</span><span>k</span>
  <h2>Stack</h2>
</h1>

Продолжение следует...

12
  • 1
    Отлично! может быть немножко яркость уменьшить и агрессивность цветовой подачи. Но это чисто на мой вкус так кажется, что будто-бы сейчас выедет полицейская или пожарная машина :) 2 апр 2020 в 19:46
  • 1
    @Sevastopol: цитата - огонь! )) Кстати, если использовать моноширинный шрифт, то думаю можно иммитировать свой градиент для каждой буквы, как в вопросе.
    – UModeL
    3 апр 2020 в 4:45
  • 3
    @Sevastopol' Как всегда выше всяких похвал )
    – Denis640Kb
    3 апр 2020 в 7:15
  • 1
    @Sevastopol': я позже попробую. Работу на дом взял. Вот, пока уши часок отдыхают заглянул сюда.
    – UModeL
    3 апр 2020 в 8:58
  • 1
    @Sevastopol' Все примеры хороши. Ваша фантазия не удержима 3 апр 2020 в 13:36
6

Анимацию SVG градиента можно сделать несколькими способами:

Изменением атрибута offset, stop-color, изменяя атрибуты X Y

Для горизонтальной анимации градиента изменяем X

<animate attributeName="x1" dur="8s" values="0%;150%;100%;0%" repeatCount="indefinite" />

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x1="%" y1="0%" x2="0%" y2="0%">
	    <stop offset="0%" stop-color="dodgerblue" />
		<stop offset="90%" stop-color="skyblue" />
		  <animate attributeName="x1" dur="8s" values="0%;150%;100%;0%" repeatCount="indefinite" />
	   </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="none" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/> 
	
  </g>
</svg>

Вертикальная анимация градиента

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x1="%" y1="0%" x2="0%" y2="0%">
	    <stop offset="0%" stop-color="skyblue" />
		<stop offset="100%" stop-color="yellowgreen" />
		  <animate attributeName="y1" dur="4s" values="0%;200%;0%" repeatCount="indefinite" />
	   </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="none" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/> 
	
  </g>
</svg>

Диагональная анимация

Анимируем оба атрибута X, Y

<animate attributeName="x1" dur="8s" values="0%;100%;100%;0%" repeatCount="indefinite" /> 
  <animate attributeName="y1" dur="8s" values="0%;100%;100%;0%" repeatCount="indefinite" />   

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x1="%" y1="0%" x2="0%" y2="0%">
	    <stop offset="0%" stop-color="skyblue" />
		<stop offset="100%" stop-color="crimson" />
		  <animate attributeName="x1" dur="8s" values="0%;100%;100%;0%" repeatCount="indefinite" /> 
		    <animate attributeName="y1" dur="8s" values="0%;100%;100%;0%" repeatCount="indefinite" />
	   </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="none" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/> 
	
  </g>
</svg>

Update

Диагональный, переходящий в горизонтальный, многоцветный градиент

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x2="0" y2="0%">
            <stop offset="0%" stop-color="#4c7eaf"></stop>
            <stop offset="25%" stop-color="#4a8eac"></stop>
            <stop offset="50%" stop-color="#AFBE00"></stop>
            <stop offset="75%" stop-color="#53bfac"></stop>
            <stop offset="100%" stop-color="#949494"></stop>
            <animate attributeName="y2" dur="6s" values="0%;100%;100%;0%" repeatCount="indefinite" />
			  <animate attributeName="x2" dur="6s" values="0%;100%;100%;0%;0%" repeatCount="indefinite" />
        </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="none" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/> 
	
  </g>
</svg>

7
  • 3
    аа! Как круто! я про побуквенно не и даже не подумала!
    – kizoso
    2 апр 2020 в 17:36
  • 1
    @Alexandr_TT Ваши вопросы и ответы, на мой взгляд одни из самых полезных ) По крайней мере для меня. Узнаю такие вещи, о которых раньше как-то и не задумывался )
    – Denis640Kb
    3 апр 2020 в 7:16
  • @Denis640Kb Благодарю, точно тоже самое с благодарностью, могу сказать в ваш адрес по поводу ваших ответов JS!!. Раз присматриваетесь к ответам SVG, значит появляется интерес к этой теме, что меня, как любителя SVG конечно же радует. Попробуйте, решитесь задать свой первый вопрос по SVG Уверяю, если смогу отвечу или ответят другие ребята Не бойтесь, любой вопрос будет встречен доброжелательно 3 апр 2020 в 7:30
  • @Alexandr_TT Вы знаете, Вы абсолютно в точку попали ) Я вообще работаю в backend, но Вы и StrangerInTheQ пробудили во мне интерес к svg, да и графике вообще. Оказалось там столько формул можно использовать. А пример, как с часами - очень интересный в плане построения всех атрибутов svg через JS. Мне прям очень понравилось. Если честно, немного стесняюсь задавать свои вопросы. Вроде пишу, но потом они мне начинают казаться такими глупыми, что невольно становится немного стыдно. =) Умение задать красивый, а главное полезный вопрос как у Вас, это пока обходим мимо меня. Но я учусь у Вас )
    – Denis640Kb
    3 апр 2020 в 7:41
  • @Denis640Kb вы наверное немного телепат :)) или мысли иногда материальны :)) Вот эти 20 минут я думал обратиться к вам, с просьбой дать свой ответ, не обязательно с нуля по часам. Там есть моменты, которые хорошо бы подправить, - обрезается внешний контур часов и уехал вправо цифровой индикатор времени. Напишите, если есть желание свой ответ по цифровым часам 3 апр 2020 в 7:48
4

Скромненько, без чудес... (Пока, только Chrome):

@import url("https://fonts.googleapis.com/css?family=Rubik+Mono+One&display=swap");
body { margin: 0; height: 100vh; background: radial-gradient(at center, #fefefe, #024679); }

h1 {
  margin: 0;
  font: 140px/1em "Rubik Mono One", sans-serif;
  text-align: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 6px #eee;
  background-image: linear-gradient(90deg, transparent, white, transparent),
    linear-gradient(90deg, transparent 5px, #f48024 5px, #f48024 10px),
    linear-gradient(270deg, transparent 4px, #f48024 5px, #f48024 10px);
  background-size: 1em 1em, 10px 0, 10px 0;
  background-repeat: no-repeat no-repeat, repeat no-repeat, repeat no-repeat;
  background-position: -20% 0, 0 11%, 0 81%;
  background-blend-mode: color-burn, screen, screen;
  -webkit-filter: drop-shadow(0 0 20px white) drop-shadow(0 0 8px white);
  filter: drop-shadow(0 0 20px white) drop-shadow(0 0 8px white);
  animation: orange_lines 3s ease-out infinite alternate,
    blink 2s ease-in-out infinite alternate;
}
@keyframes orange_lines {
  to {
    background-size: 1em 1em, 10px 100%, 10px 100%;
    -webkit-filter: drop-shadow(1px 2px 1px black) drop-shadow(0 0 3px black);
    filter: drop-shadow(1px 2px 1px black) drop-shadow(0 0 3px black);
    -webkit-text-stroke: 6px #bcbbbb;
  }
}
@keyframes blink { to { background-position: 120% 0, 0 11%, 0 81%; } }
<h1>STACK</h1>

2
  • Ни фига себе - Скромненько, без чудес. :) Я чуть со стула не упал от таких эффектов, да ещё с таким коротким кодом. Блестяще! Чувствуется рука мастера. Очень хочется увидеть от тебя не "скромную работу" Юра, просьба к тебе, дай пожалуйста хоть короткие комментарии основных моментов 8 апр 2020 в 6:49
  • @Alexandr_TT: как заточу под огнелиса, так и прокомментирую. ps: компы снова вырубились - на улице серьёзно задувает.
    – UModeL
    8 апр 2020 в 6:59
3

SVG другим способом анимации

<svg xmlns="http://www.w3.org/2000/svg" width="600" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="lg">
	    <stop offset="0%" stop-color="gold" >
        <animate dur="12s" attributeName="offset" values="0;0.5;1;0.3;0.1;1" repeatCount="indefinite"/>
      </stop>
		  <stop offset="100%" stop-color="orange" >
       <animate dur="2s" attributeName="offset" values="0.3;0.2;0.4;1;0.4;0" repeatCount="indefinite"/>
      </stop>
	   </linearGradient>
    <clipPath id="cp">
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/>
</clipPath>
</defs>
<rect width="600" height="200" clip-path="url(#cp)" fill="url(#lg)"></rect>
</svg>

Второй вариант с анимацией градиента stroke

<link href="https://fonts.googleapis.com/css?family=Aclonica&display=swap" rel="stylesheet"> 

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      text{
        text-transform: uppercase;
        font-weight: 900;
        font-family: 'Aclonica', sans-serif;
        font-size: 60px;
        fill: none;
        stroke: url(#lg);
        stroke-width: 6;
      }
    </style>
    <radialGradient id="lg" cx="20%" cy="30%">
      <stop offset="30%" stop-color="red"/>
      <stop offset="70%" stop-color="orange"/>
      
      <animate attributeName="cx" 
               dur="6s"
               begin="0s"
               repeatCount="indefinite"
               values="20%; 0%; 50%; 100%; 0%; 20%;100%; 20%"/>
          <animate attributeName="cy" 
               dur="6s"
               begin="0s"
               repeatCount="indefinite"
               values="60%; 0%; 50%; 100%; 0%; 50%; 100%;0%; 20%"/>
    </radialGradient>
  </defs>
  <g>
    <text x="0" y="100">s</text>
    <text x="47" y="100">t</text>
    <text x="90" y="100">a</text>
    <text x="140" y="100">c</text>
    <text x="190" y="100">k</text>
  </g>
</svg>

Пример с блинк эффектом

<link href="https://fonts.googleapis.com/css?family=Aclonica&display=swap" rel="stylesheet">

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      text{
        text-transform: uppercase;
        font-weight: 900;
        font-family: 'Aclonica', sans-serif;
        font-size: 60px;
        fill: none;
        stroke: url(#lg);
        stroke-width: 6;
      }
    </style>
    <radialGradient id="lg" cx="20%" cy="30%">
      <stop offset="30%" stop-color="red"/>
      <stop offset="70%" stop-color="orange"/>
      
      <animate attributeName="cx" 
               dur="6s"
               begin="0s"
               repeatCount="indefinite"
               values="20%; 0%; 50%; 100%; 0%; 20%;100%; 20%"/>
          <animate attributeName="cy" 
               dur="6s"
               begin="0s"
               repeatCount="indefinite"
               values="60%; 0%; 50%; 100%; 0%; 50%; 100%;0%; 20%"/>
    </radialGradient>
  </defs>
  <g>
    <text x="0" y="100">s
     <animate attributeName="y"
              dur="0.3s"
              begin="0s"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"
              id="p1"/>
    </text>
    <text x="47" y="100">t
     <animate attributeName="y"
              dur="0.3s"
              begin="p1.end"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"
              id="p2"/>    
    </text>
    <text x="90" y="100">a
      <animate attributeName="y"
              dur="0.3s"
              begin="p2.end"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"
              id="p3"/>      
    </text>
    <text x="140" y="100">c
      <animate attributeName="y"
              dur="0.3s"
              begin="p3.end"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"
              id="p4"/>       
    </text>
    <text x="190" y="100">k
      <animate attributeName="y"
              dur="0.3s"
              begin="p4.end"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"/>       
    </text>
  </g>
</svg>

6
  • нормально получилось Ещё остался вариант с анимацией stop-color 3 апр 2020 в 12:25
  • @Alexandr_TT занят ...ни всегда есть время ...я позже сделаю с анимацией цвета в маске 3 апр 2020 в 12:37
  • кстати, можешь в Inkscape другой экзотический шрифт выбрать для букв 3 апр 2020 в 12:41
  • @Alexandr_TT это я твой svg взял за основу ... 3 апр 2020 в 12:43
  • ну разве слепой этого не заметит :)) Поэтому и предложил для разнообразия взять другой шрифт, ты же знаешь, как это делается в два клика --.. текст/ оконтурить объект 3 апр 2020 в 12:53

Ваш ответ

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

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