Я бы хотел анимировать простой логотип компании для заголовка сайта, используя анимацию радуги в качестве фонового эффекта.поэтому анимация радуги должна быть видна через прозрачную иконку, которая находится на белом фоне.к сожалению, я не могу найти примеры кода того, как сделать это с помощью значка (.svg).
Должен ли я создать какой-то путь SVG (и если, как я могу это сделать на основеэто изображение?) или есть гораздо более простой способ, где я мог бы просто использовать черный значок на белом фоне и использовать режим смешивания CSS с .png-файлом?
вот пример эффекта радугиЯ хотел бы использовать: https://codepen.io/nohoid/pen/kIfto
.wrapper {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
<div class="wrapper"></div>
и я думаю, что это должна быть модифицированная версия этого кода ?: https://w3bits.com/rainbow-text/
и вот значок компании яя пытаюсь использовать: https://ibb.co/G3gDNsk
наилучшие пожелания макс.
ОБНОВЛЕНИЕ: так должен выглядеть код до сих пор, согласно enxaneta, однако есть одна главная проблема, почему он не работает.путь - это сложный путь, но я не знаю, как это вообще исправить.
svg{border:1px solid;width:90vh}
<svg viewBox='0 0 24 24'><title>done all</title>
<defs>
<linearGradient id="grd" x2="100%" y2="100%" >
<stop offset="0%" stop-color="#ff2400"></stop>
<stop offset="11%" stop-color="#e81d1d"></stop>
<stop offset="22%" stop-color="#e8b71d"></stop>
<stop offset="33%" stop-color="#e3e81d"></stop>
<stop offset="44%" stop-color="#1de840"></stop>
<stop offset="55%" stop-color="#2b1de8"></stop>
<stop offset="66%" stop-color="#ff2400"></stop>
<stop offset="77%" stop-color="#dd00f3"></stop>
<stop offset="88%" stop-color="#e8b71d"></stop>
<stop offset="100%" stop-color="#dd00f3"></stop>
</linearGradient>
<mask id="msk">
<path d='M 18.23,553.81
C 16.54,552.11 189.40,380.94 204.90,365.46
204.90,365.46 221.86,348.50 221.86,348.50
220.31,346.94 228.38,340.00 230.65,339.72
235.11,339.12 230.19,343.26 229.65,344.08
226.40,349.10 220.20,353.53 215.95,357.78
215.95,357.78 106.44,467.41 106.44,467.41
106.44,467.41 46.03,527.60 46.03,527.60
41.78,531.85 22.94,556.61 16.46,552.39
6.94,546.05 -1.91,561.39 7.54,567.69
24.22,578.77 35.87,563.05 46.49,552.36
46.49,552.36 102.19,496.66 102.19,496.66
102.19,496.66 229.97,368.86 229.97,368.86
239.46,359.37 256.39,347.44 248.84,331.97
238.86,311.36 219.95,325.45 209.40,336.00
209.40,336.00 88.52,456.79 88.52,456.79
88.52,456.79 22.38,522.90 22.38,522.90
11.76,533.52 -10.48,550.13 5.70,566.31
13.77,574.38 26.27,561.88 18.23,553.81 Z
M 224.71,333.10
C 228.62,329.19 234.96,329.19 238.88,333.10
238.88,333.10 238.90,333.13 238.90,333.13
242.82,337.04 242.82,343.39 238.90,347.30
238.90,347.30 26.14,560.08 26.14,560.08
22.23,563.99 15.88,563.99 11.97,560.08
11.97,560.08 11.94,560.05 11.94,560.05
8.03,556.14 8.03,549.79 11.94,545.88
11.94,545.88 224.71,333.10 224.71,333.10 Z
M 313.99,554.87
C 310.17,553.06 344.27,486.07 347.07,480.12
347.07,480.12 403.72,360.15 403.72,360.15
400.57,353.50 410.27,339.83 415.76,334.66
419.55,331.12 413.77,334.66 419.69,333.95
423.83,329.56 428.96,327.79 432.72,327.79
432.72,327.79 378.76,442.09 378.76,442.09
378.76,442.09 327.38,527.60 327.38,527.60
325.68,531.15 317.89,555.54 311.87,554.06
300.82,551.33 296.08,568.22 307.16,571.12
325.15,575.55 330.64,561.99 336.83,548.85
336.83,548.85 364.49,490.25 364.49,490.25
364.49,490.25 428.04,355.69 428.04,355.69
433.46,344.18 441.78,329.27 392.35,341.53
380.45,313.80 359.78,355.34 359.78,355.34
359.78,355.34 299.23,483.59 299.23,483.59
299.23,483.59 303.80,530.44 303.80,530.44
298.06,542.62 287.19,562.94 343.49,562.94
315.13,574.98 324.30,559.72 313.99,554.87 Z
M 408.18,329.91
C 408.18,329.91 408.18,329.91 408.18,329.91
410.55,324.90 416.52,322.76 421.52,325.12
421.52,325.12 421.55,325.14 421.55,325.14
426.56,327.50 428.70,333.47 426.34,338.48
426.34,338.48 426.34,338.48 426.34,338.48
426.34,338.48 322.85,557.73 322.85,557.73
320.48,562.73 314.51,564.87 309.51,562.51
309.51,562.51 309.48,562.50 309.48,562.50
304.47,560.13 302.33,554.16 304.69,549.16
304.69,549.16 408.18,329.91 408.18,329.91 Z
M 235.50,336.22
C 233.09,336.22 234.33,82.58 234.33,60.02
234.33,60.02 234.33,33.46 234.33,33.46
234.33,30.84 232.84,22.84 234.33,17.60
222.50,22.95 240.35,17.60 247.89,17.60
267.58,17.60 240.35,17.60 240.35,17.60
240.35,17.60 240.35,295.88 240.35,295.88
240.35,302.26 244.70,334.83 236.81,336.53
223.39,330.09 256.14,341.24 253.87,356.29
249.87,372.83 229.72,372.83 214.50,372.83
214.50,372.83 214.50,43.24 214.50,43.24
214.50,29.89 218.32,8.68 202.92,2.20
180.26,-7.37 176.72,18.20 176.72,33.46
176.72,33.46 176.72,310.33 176.72,310.33
176.72,325.45 172.44,353.92 195.59,353.92
246.90,353.92 246.90,336.22 235.50,336.22 Z
M 235.53,9.49
C 241.07,9.49 245.55,13.98 245.55,19.51
245.55,19.51 245.55,335.05 245.55,335.05
245.55,340.58 241.07,345.07 235.53,345.07
235.53,345.07 235.50,345.07 235.50,345.07
235.50,345.07 235.50,345.07 235.50,345.07
229.96,345.07 225.48,340.58 225.48,335.05
225.48,335.05 225.48,19.51 225.48,19.51
225.48,13.98 229.96,9.49 235.50,9.49
235.50,9.49 235.50,9.49 235.50,9.49
235.50,9.49 235.53,9.49 235.53,9.49 Z
M 417.28,336.22
C 414.87,336.22 416.11,82.58 416.11,60.02
416.11,60.02 416.11,33.46 416.11,33.46
416.11,30.84 414.62,22.84 416.11,17.60
404.28,22.95 422.13,17.60 429.67,17.60
449.36,17.60 422.13,17.60 422.13,17.60
422.13,17.60 422.13,295.88 422.13,295.88
422.13,302.26 426.48,334.83 418.59,336.53
405.17,330.09 437.92,341.24 435.66,356.29
431.65,372.83 411.51,372.83 396.28,372.83
396.28,372.83 396.28,43.24 396.28,43.24
396.28,29.89 400.11,8.68 384.70,2.20
362.04,-7.37 358.50,18.20 358.50,33.46
358.50,33.46 358.50,310.33 358.50,310.33
358.50,325.45 354.22,353.92 377.37,353.92
428.68,353.92 428.72,336.22 417.28,336.22 Z
M 417.31,9.49
C 422.85,9.49 427.33,13.98 427.33,19.51
427.33,19.51 427.33,335.05 427.33,335.05
427.33,340.58 422.85,345.07 417.31,345.07
417.31,345.07 417.28,345.07 417.28,345.07
411.74,345.07 407.26,340.58 407.26,335.05
407.26,335.05 407.26,19.51 407.26,19.51
407.26,13.98 411.74,9.49 417.28,9.49
417.28,9.49 417.31,9.49 417.31,9.49 Z
M 597.68,333.21
C 595.27,333.21 596.51,81.44 596.51,58.82
596.51,58.82 596.51,33.53 596.51,33.53
596.51,30.91 595.06,22.66 596.51,17.60
584.65,22.98 602.60,17.60 610.07,17.60
629.83,17.60 602.60,17.60 602.60,17.60
602.60,17.60 602.60,292.73 602.60,292.73
602.60,298.89 606.92,331.97 599.06,333.56
585.64,327.11 618.39,338.27 616.13,353.39
612.13,369.93 591.91,369.93 576.65,369.93
576.65,369.93 576.65,42.49 576.65,42.49
576.65,28.97 580.40,7.65 564.01,1.88
542.13,-5.81 538.87,17.92 538.87,32.90
538.87,32.90 538.87,307.21 538.87,307.21
538.87,322.33 534.58,350.91 557.74,350.91
609.01,350.91 609.01,333.21 597.68,333.21 Z
M 597.68,9.49
C 597.68,9.49 597.68,9.49 597.68,9.49
603.21,9.49 607.70,13.98 607.70,19.51
607.70,19.51 607.70,332.04 607.70,332.04
607.70,337.57 603.21,342.06 597.68,342.06
597.68,342.06 597.68,342.06 597.68,342.06
597.68,342.06 597.65,342.06 597.65,342.06
597.65,342.06 597.65,342.06 597.65,342.06
592.11,342.06 587.63,337.57 587.63,332.04
587.63,332.04 587.63,19.51 587.63,19.51
587.63,13.98 592.11,9.49 597.65,9.49
597.65,9.49 597.65,9.49 597.65,9.49
597.65,9.49 597.68,9.49 597.68,9.49 Z
M 780.10,555.30
C 777.45,555.30 778.79,123.90 778.79,85.34
778.79,85.34 778.79,41.29 778.79,41.29
778.79,36.26 776.49,24.54 778.79,20.04
776.21,12.50 787.01,27.51 787.01,27.51
787.01,27.51 787.01,487.84 787.01,487.84
787.01,495.70 792.32,553.91 783.46,555.68
770.05,549.24 802.80,560.39 800.53,579.69
795.68,596.09 755.78,596.09 738.07,596.09
738.07,596.09 738.07,28.33 738.07,28.33
738.07,18.70 720.08,21.03 713.85,13.95
702.70,-17.32 683.37,31.05 713.36,23.30
713.36,42.14 713.36,51.63 713.36,51.63
713.36,51.63 713.36,503.81 713.36,503.81
713.36,520.52 704.19,575.12 732.37,575.12
791.50,573.00 791.50,555.30 780.10,555.30 Z
M 780.10,8.96
C 780.10,8.96 780.10,8.96 780.10,8.96
785.58,8.96 790.02,13.40 790.02,18.87
790.02,18.87 790.02,554.23 790.02,554.23
790.02,554.23 790.02,554.23 790.02,554.23
790.02,559.71 785.58,564.15 780.10,564.15
780.10,564.15 780.10,564.15 780.10,564.15
780.10,564.15 779.85,564.15 779.85,564.15
779.85,564.15 779.85,564.15 779.85,564.15
774.38,564.15 769.94,559.71 769.94,554.23
769.94,554.23 769.94,554.23 769.94,554.23
769.94,554.23 769.94,18.87 769.94,18.87
769.94,13.40 774.38,8.96 779.85,8.96
779.85,8.96 779.85,8.96 779.85,8.96
779.85,8.96 780.10,8.96 780.10,8.96 Z' fill="white"></path>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-200" width="800" height = "573" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 200,0; 0,0"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
</svg>