3

Подскажите, пожалуйста, как можно создать clip-path (ну или любую другую маску) по форме флажка ? введите сюда описание изображения Не знаю как этот синусоидальный обвод сделать, что б он и сверху и снизу совпадал.

body {
  margin: 0;
  font-size: 0;
}

.flag {
  width: 370px;
  height: 370px;
  border: 1px solid #000;
}

p {
  width: 100%;
  height: calc(370px / 3);
}

.red {
  background: red;
}

.white {
  background: white;
}

.blue {
  background: blue;
}
<div class="flag">
  <p class="red"></p>
  <p class="white"></p>
  <p class="blue"></p>
</div>

1
  • 1
    не понятно - почему нельзя открыть векторный редактор и самому нарисовать - щас всё равно придут участники сообщества stackoverflow и откроют inkscape illustrator или же corel - заскринят как делают это ... 29 окт 2020 в 1:35

3 ответа 3

3

Посмотрите этот ответ. Переделал его немного. Дальше останется только прямые дорисовать, чтобы ограничить область, и применить clip-path.

const svg = document.getElementById('sine_wave').children[0]

const origin = { //origin of axes
  x: 100,
  y: 100
}

const origin1 = { //origin of axes
  x: 100,
  y: 200
}

const origin2 = { //origin of axes
  x: 100,
  y: 300
}

const amplitude = 50; // wave amplitude
const rarity = 10; // point spacing
const freq = 0.1; // angular frequency
const phase = 20; // phase angle

const drawLine = (origin, length, rarity, freq, phase, amplitude) => {

  const lines = []

  for (i = 0; i < length; i++) {
    const line = document.createElementNS("http://www.w3.org/2000/svg", "line")

    line.setAttribute('x1', (i - 1) * rarity + origin.x)
    line.setAttribute('y1', Math.sin(freq * (i - 1 + phase)) * amplitude + origin.y)

    line.setAttribute('x2', i * rarity + origin.x)
    line.setAttribute('y2', Math.sin(freq * (i + phase)) * amplitude + origin.y)

    line.setAttribute('style', "stroke:black;stroke-width:1")
    lines.push(line)
  }

  return lines
}

const line1 = drawLine(origin, 50, rarity, freq, phase, amplitude)
const line2 = drawLine(origin1, 50, rarity, freq, phase, amplitude)
const line3 = drawLine(origin2, 50, rarity, freq, phase, amplitude)

line1.forEach(e => svg.appendChild(e))
line2.forEach(e => svg.appendChild(e))
line3.forEach(e => svg.appendChild(e))
html,
body,
div {
  height: 100%;
}
<div id="sine_wave">
  <svg width="1000" height="500"></svg>
</div>

1
  • Там по аналогии сделать Нарисовать первую синусоиду Две вертикальные линии слева и справа Нарисовать синусоиду снизу, чтобы получился контейнер И скопировать его ещё два раза, только смещать каждый следующий на высоту контейнера Либо можно не заморачиваться и действительно нарисовать svg в corel или illustrator, вставить на страницу и применить clip-path
    – Kirill
    29 окт 2020 в 1:44
2

#1. Одна полоса

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="300" viewBox="0 0 400 300" >  
<defs>
 <path id="pathR" fill="#0096F7"  d="M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z" >
</defs>  
<use xlink:href="#pathR" fill="#0096F7" /> 
</svg>

#2. Полоса с анимацией

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="300" viewBox="0 0 400 300" >  

<defs>
 <path id="pathR"  d="M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z" >
 <animate
    attributeName="d"
    begin="0s"
    dur="4s"
    fill="freeze"
    restart="whenNotActive"
    repeatCount="indefinite"
    values="
     M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z;
    
    M0 29C29.2 43.9 57.8 53.3 90 54 119.8 54.7 154.4 41.4 185 29 219.6 15 250.4 5.3 280.2 6 312.4 6.6 348.7 13.5 370 29V129C342.8 106.2 312.4 106.6 280.2 106 250.4 105.3 220.3 117 185 129 157.3 138.4 119.7 154.7 90 154 57.7 153.3 28.2 154.5 0 129Z; 

    M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z" />
</path>  
</defs>  

<use xlink:href="#pathR" fill="#0096F7" /> 
</svg>

#3. Две полосы с анимацией

Повторно используем первую полосу и перекрашиваем её в нужный цвет

<use xlink:href="#pathR" fill="#0096F7" /> 
   <use xlink:href="#pathR" fill="#F7C700" x="0" y="90" />

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="300" viewBox="0 0 400 300" >  

<defs>
 <path id="pathR"  d="M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z" >
 <animate
    attributeName="d"
    begin="0s"
    dur="4s"
    fill="freeze"
    restart="whenNotActive"
    repeatCount="indefinite"
    values="
     M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z;
    
    M0 29C29.2 43.9 57.8 53.3 90 54 119.8 54.7 154.4 41.4 185 29 219.6 15 250.4 5.3 280.2 6 312.4 6.6 348.7 13.5 370 29V129C342.8 106.2 312.4 106.6 280.2 106 250.4 105.3 220.3 117 185 129 157.3 138.4 119.7 154.7 90 154 57.7 153.3 28.2 154.5 0 129Z; 

    M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z" />
</path>  
</defs>  
<use xlink:href="#pathR" fill="#0096F7" /> 
   <use xlink:href="#pathR" fill="#F7C700" x="0" y="90" />
</svg>

#4. Добавляем SVG фильтры

Фильтры начинают действовать при наведении на флаг

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="300" viewBox="0 0 400 300" >  

<defs>
 <path id="pathR" filter="url(#myFilter)"  d="M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z" >
 <animate
    attributeName="d"
    begin="0s"
    dur="4s"
    fill="freeze"
    restart="whenNotActive"
    repeatCount="indefinite"
    values="
     M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z;
    
    M0 29C29.2 43.9 57.8 53.3 90 54 119.8 54.7 154.4 41.4 185 29 219.6 15 250.4 5.3 280.2 6 312.4 6.6 348.7 13.5 370 29V129C342.8 106.2 312.4 106.6 280.2 106 250.4 105.3 220.3 117 185 129 157.3 138.4 119.7 154.7 90 154 57.7 153.3 28.2 154.5 0 129Z; 

    M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z" />
</path>  
  <filter id="myFilter" >
      <feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="5" result="turbulence" >
     <animate attributeName="baseFrequency" dur="16s" repeatCount="indefinite" values="0.0001;0.02;0.0001;0.02;0.0001" begin="svg1.mouseover" end="svg1.mouseout" />
      </feTurbulence>
     <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="8" in="SourceGraphic" in2="turbulence" />
    </filter>
 </defs> 
  <use xlink:href="#pathR" fill="#0096F7" /> 
   <use xlink:href="#pathR" fill="#F7C700" x="0" y="90" />
<polyline points="6,25 6, 400" stroke="silver" stroke-width="12" stroke-linecap="round" />
 </svg>

#5. Трехполосный флаг

Добавляем третью полосу

<use xlink:href="#pathR" fill="#0000EF" /> 
   <use xlink:href="#pathR" fill="#F9F9F9" x="0" y="90" /> 
     <use xlink:href="#pathR" fill="#CA0000" x="0" y="180" /> 

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  

<defs>
 <path id="pathR" filter="url(#myFilter)"  d="M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z" >
 <animate
    attributeName="d"
    begin="0s"
    dur="4s"
    fill="freeze"
    restart="whenNotActive"
    repeatCount="indefinite"
    values="
     M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z;
    
    M0 29C29.2 43.9 57.8 53.3 90 54 119.8 54.7 154.4 41.4 185 29 219.6 15 250.4 5.3 280.2 6 312.4 6.6 348.7 13.5 370 29V129C342.8 106.2 312.4 106.6 280.2 106 250.4 105.3 220.3 117 185 129 157.3 138.4 119.7 154.7 90 154 57.7 153.3 28.2 154.5 0 129Z; 

    M0 29C27.7 11.7 57.8 3.3 90 4 119.8 4.7 151.4 13 185 29 218.7 45 250.4 53.3 280.2 54 312.4 54.6 342.3 46.3 370 29v100c-27.7 17.3-57.6 25.6-89.8 25C250.4 153.3 218.7 145 185 129 151.4 113 119.7 104.7 90 104 57.7 103.3 27.7 111.7 0 129Z" />
</path>  
  <filter id="myFilter" >
      <feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="5" result="turbulence" >
     <animate attributeName="baseFrequency" dur="16s" repeatCount="indefinite" values="0.0001;0.02;0.0001;0.02;0.0001" begin="svg1.mouseover" end="svg1.mouseout" />
      </feTurbulence>
     <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="8" in="SourceGraphic" in2="turbulence" />
    </filter>
 </defs> 
 
 <use xlink:href="#pathR" fill="#0000EF" /> 
   <use xlink:href="#pathR" fill="#F9F9F9" x="0" y="90" /> 
     <use xlink:href="#pathR" fill="#CA0000" x="0" y="180" /> 
<polyline points="6,25 6, 400" stroke="silver" stroke-width="12" stroke-linecap="round" />
 
</svg>

1

Для анимации флага используется изменение атрибута d path

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">
<path fill="dodgerblue" d="M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z">
<animate dur="1.8s" attributeName="d" fill="freeze" repeatCount="indefinite" values="
M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z;
M20 20Q28 19.8 36 20Q44 20.5 52 21.2Q60 22 68 22.9Q76 23.5 84 23.8Q92 23.6 100 22.9Q108 21.7 116 20Q124 18 132 15.9Q140 13.9 148 12.4Q156 11.5 164 11.4Q172 12.3 180 14.1L180 174.1Q172 172.3 164 171.4Q156 171.5 148 172.4Q140 173.9 132 175.9Q124 178 116 180Q108 181.7 100 182.9Q92 183.6 84 183.8Q76 183.5 68 182.9Q60 182 52 181.2Q44 180.5 36 180Q28 179.8 20 180Z;
M20 20Q28 19.6 36 19.4Q44 19.5 52 20Q60 20.8 68 21.8Q76 22.8 84 23.8Q92 24.5 100 24.8Q108 24.4 116 23.5Q124 22 132 20Q140 17.7 148 15.3Q156 13.1 164 11.4Q172 10.5 180 10.5L180 170.5Q172 170.5 164 171.4Q156 173.1 148 175.3Q140 177.7 132 180Q124 182 116 183.5Q108 184.4 100 184.8Q92 184.5 84 183.8Q76 182.8 68 181.8Q60 180.8 52 180Q44 179.5 36 179.4Q28 179.6 20 180Z;
M20 20Q28 19.5 36 19Q44 18.8 52 18.8Q60 19.2 68 20Q76 21.1 84 22.4Q92 23.6 100 24.8Q108 25.5 116 25.7Q124 25.3 132 24.1Q140 22.3 148 20Q156 17.4 164 14.7Q172 12.3 180 10.5L180 170.5Q172 172.3 164 174.7Q156 177.4 148 180Q140 182.3 132 184.1Q124 185.3 116 185.7Q108 185.5 100 184.8Q92 183.6 84 182.4Q76 181.1 68 180Q60 179.2 52 178.8Q44 178.8 36 179Q28 179.5 20 180Z;
M20 20Q28 19.6 36 19Q44 18.5 52 18.1Q60 18 68 18.2Q76 18.9 84 20Q92 21.4 100 22.9Q108 24.4 116 25.7Q124 26.5 132 26.7Q140 26.1 148 24.7Q156 22.6 164 20Q172 17.1 180 14.1L180 174.1Q172 177.1 164 180Q156 182.6 148 184.7Q140 186.1 132 186.7Q124 186.5 116 185.7Q108 184.4 100 182.9Q92 181.4 84 180Q76 178.9 68 178.2Q60 178 52 178.1Q44 178.5 36 179Q28 179.6 20 180Z;
M20 20Q28 19.8 36 19.4Q44 18.8 52 18.1Q60 17.5 68 17.1Q76 17.2 84 17.6Q92 18.6 100 20Q108 21.7 116 23.5Q124 25.3 132 26.7Q140 27.5 148 27.6Q156 26.9 164 25.3Q172 22.9 180 20L180 180Q172 182.9 164 185.3Q156 186.9 148 187.6Q140 187.5 132 186.7Q124 185.3 116 183.5Q108 181.7 100 180Q92 178.6 84 177.6Q76 177.2 68 177.1Q60 177.5 52 178.1Q44 178.8 36 179.4Q28 179.8 20 180Z;
M20 20Q28 20.2 36 20Q44 19.5 52 18.8Q60 18 68 17.1Q76 16.5 84 16.2Q92 16.4 100 17.1Q108 18.3 116 20Q124 22 132 24.1Q140 26.1 148 27.6Q156 28.5 164 28.6Q172 27.7 180 25.9L180 185.9Q172 187.7 164 188.6Q156 188.5 148 187.6Q140 186.1 132 184.1Q124 182 116 180Q108 178.3 100 177.1Q92 176.4 84 176.2Q76 176.5 68 177.1Q60 178 52 178.8Q44 179.5 36 180Q28 180.2 20 180Z;
M20 20Q28 20.4 36 20.6Q44 20.5 52 20Q60 19.2 68 18.2Q76 17.2 84 16.2Q92 15.5 100 15.2Q108 15.6 116 16.5Q124 18 132 20Q140 22.3 148 24.7Q156 26.9 164 28.6Q172 29.5 180 29.5L180 189.5Q172 189.5 164 188.6Q156 186.9 148 184.7Q140 182.3 132 180Q124 178 116 176.5Q108 175.6 100 175.2Q92 175.5 84 176.2Q76 177.2 68 178.2Q60 179.2 52 180Q44 180.5 36 180.6Q28 180.4 20 180Z;
M20 20Q28 20.5 36 21Q44 21.2 52 21.2Q60 20.8 68 20Q76 18.9 84 17.6Q92 16.4 100 15.2Q108 14.5 116 14.3Q124 14.7 132 15.9Q140 17.7 148 20Q156 22.6 164 25.3Q172 27.7 180 29.5L180 189.5Q172 187.7 164 185.3Q156 182.6 148 180Q140 177.7 132 175.9Q124 174.7 116 174.3Q108 174.5 100 175.2Q92 176.4 84 177.6Q76 178.9 68 180Q60 180.8 52 181.2Q44 181.2 36 181Q28 180.5 20 180Z;
M20 20Q28 20.4 36 21Q44 21.5 52 21.9Q60 22 68 21.8Q76 21.1 84 20Q92 18.6 100 17.1Q108 15.6 116 14.3Q124 13.5 132 13.3Q140 13.9 148 15.3Q156 17.4 164 20Q172 22.9 180 25.9L180 185.9Q172 182.9 164 180Q156 177.4 148 175.3Q140 173.9 132 173.3Q124 173.5 116 174.3Q108 175.6 100 177.1Q92 178.6 84 180Q76 181.1 68 181.8Q60 182 52 181.9Q44 181.5 36 181Q28 180.4 20 180Z;
M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z
"/>
</path>
</svg>

Добавлен градиент

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<linearGradient id="Lg"  x2="100%" >
      <stop offset="0%"   stop-color="#0096F7" />
      <stop offset="25%" stop-color="#A4D6F7" />
      <stop offset="50%" stop-color="#0096F7" />
       <stop offset="75%" stop-color="#A4D6F7" />
        <stop offset="100%" stop-color="#0096F7" />
    </linearGradient>
</defs> 
<path fill="url(#Lg)" d="M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z">
<animate dur="1.8s" attributeName="d" fill="freeze" repeatCount="indefinite" values="
M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z;
M20 20Q28 19.8 36 20Q44 20.5 52 21.2Q60 22 68 22.9Q76 23.5 84 23.8Q92 23.6 100 22.9Q108 21.7 116 20Q124 18 132 15.9Q140 13.9 148 12.4Q156 11.5 164 11.4Q172 12.3 180 14.1L180 174.1Q172 172.3 164 171.4Q156 171.5 148 172.4Q140 173.9 132 175.9Q124 178 116 180Q108 181.7 100 182.9Q92 183.6 84 183.8Q76 183.5 68 182.9Q60 182 52 181.2Q44 180.5 36 180Q28 179.8 20 180Z;
M20 20Q28 19.6 36 19.4Q44 19.5 52 20Q60 20.8 68 21.8Q76 22.8 84 23.8Q92 24.5 100 24.8Q108 24.4 116 23.5Q124 22 132 20Q140 17.7 148 15.3Q156 13.1 164 11.4Q172 10.5 180 10.5L180 170.5Q172 170.5 164 171.4Q156 173.1 148 175.3Q140 177.7 132 180Q124 182 116 183.5Q108 184.4 100 184.8Q92 184.5 84 183.8Q76 182.8 68 181.8Q60 180.8 52 180Q44 179.5 36 179.4Q28 179.6 20 180Z;
M20 20Q28 19.5 36 19Q44 18.8 52 18.8Q60 19.2 68 20Q76 21.1 84 22.4Q92 23.6 100 24.8Q108 25.5 116 25.7Q124 25.3 132 24.1Q140 22.3 148 20Q156 17.4 164 14.7Q172 12.3 180 10.5L180 170.5Q172 172.3 164 174.7Q156 177.4 148 180Q140 182.3 132 184.1Q124 185.3 116 185.7Q108 185.5 100 184.8Q92 183.6 84 182.4Q76 181.1 68 180Q60 179.2 52 178.8Q44 178.8 36 179Q28 179.5 20 180Z;
M20 20Q28 19.6 36 19Q44 18.5 52 18.1Q60 18 68 18.2Q76 18.9 84 20Q92 21.4 100 22.9Q108 24.4 116 25.7Q124 26.5 132 26.7Q140 26.1 148 24.7Q156 22.6 164 20Q172 17.1 180 14.1L180 174.1Q172 177.1 164 180Q156 182.6 148 184.7Q140 186.1 132 186.7Q124 186.5 116 185.7Q108 184.4 100 182.9Q92 181.4 84 180Q76 178.9 68 178.2Q60 178 52 178.1Q44 178.5 36 179Q28 179.6 20 180Z;
M20 20Q28 19.8 36 19.4Q44 18.8 52 18.1Q60 17.5 68 17.1Q76 17.2 84 17.6Q92 18.6 100 20Q108 21.7 116 23.5Q124 25.3 132 26.7Q140 27.5 148 27.6Q156 26.9 164 25.3Q172 22.9 180 20L180 180Q172 182.9 164 185.3Q156 186.9 148 187.6Q140 187.5 132 186.7Q124 185.3 116 183.5Q108 181.7 100 180Q92 178.6 84 177.6Q76 177.2 68 177.1Q60 177.5 52 178.1Q44 178.8 36 179.4Q28 179.8 20 180Z;
M20 20Q28 20.2 36 20Q44 19.5 52 18.8Q60 18 68 17.1Q76 16.5 84 16.2Q92 16.4 100 17.1Q108 18.3 116 20Q124 22 132 24.1Q140 26.1 148 27.6Q156 28.5 164 28.6Q172 27.7 180 25.9L180 185.9Q172 187.7 164 188.6Q156 188.5 148 187.6Q140 186.1 132 184.1Q124 182 116 180Q108 178.3 100 177.1Q92 176.4 84 176.2Q76 176.5 68 177.1Q60 178 52 178.8Q44 179.5 36 180Q28 180.2 20 180Z;
M20 20Q28 20.4 36 20.6Q44 20.5 52 20Q60 19.2 68 18.2Q76 17.2 84 16.2Q92 15.5 100 15.2Q108 15.6 116 16.5Q124 18 132 20Q140 22.3 148 24.7Q156 26.9 164 28.6Q172 29.5 180 29.5L180 189.5Q172 189.5 164 188.6Q156 186.9 148 184.7Q140 182.3 132 180Q124 178 116 176.5Q108 175.6 100 175.2Q92 175.5 84 176.2Q76 177.2 68 178.2Q60 179.2 52 180Q44 180.5 36 180.6Q28 180.4 20 180Z;
M20 20Q28 20.5 36 21Q44 21.2 52 21.2Q60 20.8 68 20Q76 18.9 84 17.6Q92 16.4 100 15.2Q108 14.5 116 14.3Q124 14.7 132 15.9Q140 17.7 148 20Q156 22.6 164 25.3Q172 27.7 180 29.5L180 189.5Q172 187.7 164 185.3Q156 182.6 148 180Q140 177.7 132 175.9Q124 174.7 116 174.3Q108 174.5 100 175.2Q92 176.4 84 177.6Q76 178.9 68 180Q60 180.8 52 181.2Q44 181.2 36 181Q28 180.5 20 180Z;
M20 20Q28 20.4 36 21Q44 21.5 52 21.9Q60 22 68 21.8Q76 21.1 84 20Q92 18.6 100 17.1Q108 15.6 116 14.3Q124 13.5 132 13.3Q140 13.9 148 15.3Q156 17.4 164 20Q172 22.9 180 25.9L180 185.9Q172 182.9 164 180Q156 177.4 148 175.3Q140 173.9 132 173.3Q124 173.5 116 174.3Q108 175.6 100 177.1Q92 178.6 84 180Q76 181.1 68 181.8Q60 182 52 181.9Q44 181.5 36 181Q28 180.4 20 180Z;
M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z
"/>
</path>
</svg>

Адаптивный вариант двухполосного флага

Работает во всех современных браузерах, включая Edge

.container {
width:40vw;
height:40vh;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 400 300">
<defs>
<linearGradient id="Lg"  x2="100%" >
      <stop offset="0%"   stop-color="#0096F7" />
      <stop offset="25%" stop-color="#A4D6F7" />
      <stop offset="50%" stop-color="#0096F7" />
       <stop offset="75%" stop-color="#A4D6F7" />
        <stop offset="100%" stop-color="#0096F7" />
    </linearGradient> 
    <linearGradient id="Le"  x2="100%" >
      <stop offset="0%"   stop-color="#FFD700" />
      <stop offset="27%" stop-color="#FFF5BB" />
      <stop offset="50%" stop-color="#FFD700" />
       <stop offset="77%" stop-color="#FFF5BB" />
        <stop offset="100%" stop-color="#FFD700" />
    </linearGradient>

<path id="flag" transform="scale(1,0.7)"  d="M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z">
<animate dur="1.8s"  attributeName="d" fill="freeze" repeatCount="indefinite" values="
M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z;
M20 20Q28 19.8 36 20Q44 20.5 52 21.2Q60 22 68 22.9Q76 23.5 84 23.8Q92 23.6 100 22.9Q108 21.7 116 20Q124 18 132 15.9Q140 13.9 148 12.4Q156 11.5 164 11.4Q172 12.3 180 14.1L180 174.1Q172 172.3 164 171.4Q156 171.5 148 172.4Q140 173.9 132 175.9Q124 178 116 180Q108 181.7 100 182.9Q92 183.6 84 183.8Q76 183.5 68 182.9Q60 182 52 181.2Q44 180.5 36 180Q28 179.8 20 180Z;
M20 20Q28 19.6 36 19.4Q44 19.5 52 20Q60 20.8 68 21.8Q76 22.8 84 23.8Q92 24.5 100 24.8Q108 24.4 116 23.5Q124 22 132 20Q140 17.7 148 15.3Q156 13.1 164 11.4Q172 10.5 180 10.5L180 170.5Q172 170.5 164 171.4Q156 173.1 148 175.3Q140 177.7 132 180Q124 182 116 183.5Q108 184.4 100 184.8Q92 184.5 84 183.8Q76 182.8 68 181.8Q60 180.8 52 180Q44 179.5 36 179.4Q28 179.6 20 180Z;
M20 20Q28 19.5 36 19Q44 18.8 52 18.8Q60 19.2 68 20Q76 21.1 84 22.4Q92 23.6 100 24.8Q108 25.5 116 25.7Q124 25.3 132 24.1Q140 22.3 148 20Q156 17.4 164 14.7Q172 12.3 180 10.5L180 170.5Q172 172.3 164 174.7Q156 177.4 148 180Q140 182.3 132 184.1Q124 185.3 116 185.7Q108 185.5 100 184.8Q92 183.6 84 182.4Q76 181.1 68 180Q60 179.2 52 178.8Q44 178.8 36 179Q28 179.5 20 180Z;
M20 20Q28 19.6 36 19Q44 18.5 52 18.1Q60 18 68 18.2Q76 18.9 84 20Q92 21.4 100 22.9Q108 24.4 116 25.7Q124 26.5 132 26.7Q140 26.1 148 24.7Q156 22.6 164 20Q172 17.1 180 14.1L180 174.1Q172 177.1 164 180Q156 182.6 148 184.7Q140 186.1 132 186.7Q124 186.5 116 185.7Q108 184.4 100 182.9Q92 181.4 84 180Q76 178.9 68 178.2Q60 178 52 178.1Q44 178.5 36 179Q28 179.6 20 180Z;
M20 20Q28 19.8 36 19.4Q44 18.8 52 18.1Q60 17.5 68 17.1Q76 17.2 84 17.6Q92 18.6 100 20Q108 21.7 116 23.5Q124 25.3 132 26.7Q140 27.5 148 27.6Q156 26.9 164 25.3Q172 22.9 180 20L180 180Q172 182.9 164 185.3Q156 186.9 148 187.6Q140 187.5 132 186.7Q124 185.3 116 183.5Q108 181.7 100 180Q92 178.6 84 177.6Q76 177.2 68 177.1Q60 177.5 52 178.1Q44 178.8 36 179.4Q28 179.8 20 180Z;
M20 20Q28 20.2 36 20Q44 19.5 52 18.8Q60 18 68 17.1Q76 16.5 84 16.2Q92 16.4 100 17.1Q108 18.3 116 20Q124 22 132 24.1Q140 26.1 148 27.6Q156 28.5 164 28.6Q172 27.7 180 25.9L180 185.9Q172 187.7 164 188.6Q156 188.5 148 187.6Q140 186.1 132 184.1Q124 182 116 180Q108 178.3 100 177.1Q92 176.4 84 176.2Q76 176.5 68 177.1Q60 178 52 178.8Q44 179.5 36 180Q28 180.2 20 180Z;
M20 20Q28 20.4 36 20.6Q44 20.5 52 20Q60 19.2 68 18.2Q76 17.2 84 16.2Q92 15.5 100 15.2Q108 15.6 116 16.5Q124 18 132 20Q140 22.3 148 24.7Q156 26.9 164 28.6Q172 29.5 180 29.5L180 189.5Q172 189.5 164 188.6Q156 186.9 148 184.7Q140 182.3 132 180Q124 178 116 176.5Q108 175.6 100 175.2Q92 175.5 84 176.2Q76 177.2 68 178.2Q60 179.2 52 180Q44 180.5 36 180.6Q28 180.4 20 180Z;
M20 20Q28 20.5 36 21Q44 21.2 52 21.2Q60 20.8 68 20Q76 18.9 84 17.6Q92 16.4 100 15.2Q108 14.5 116 14.3Q124 14.7 132 15.9Q140 17.7 148 20Q156 22.6 164 25.3Q172 27.7 180 29.5L180 189.5Q172 187.7 164 185.3Q156 182.6 148 180Q140 177.7 132 175.9Q124 174.7 116 174.3Q108 174.5 100 175.2Q92 176.4 84 177.6Q76 178.9 68 180Q60 180.8 52 181.2Q44 181.2 36 181Q28 180.5 20 180Z;
M20 20Q28 20.4 36 21Q44 21.5 52 21.9Q60 22 68 21.8Q76 21.1 84 20Q92 18.6 100 17.1Q108 15.6 116 14.3Q124 13.5 132 13.3Q140 13.9 148 15.3Q156 17.4 164 20Q172 22.9 180 25.9L180 185.9Q172 182.9 164 180Q156 177.4 148 175.3Q140 173.9 132 173.3Q124 173.5 116 174.3Q108 175.6 100 177.1Q92 178.6 84 180Q76 181.1 68 181.8Q60 182 52 181.9Q44 181.5 36 181Q28 180.4 20 180Z;
M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z
"/>
</path>
</defs>  

 
   <use xlink:href="#flag" y="110" fill="url(#Le)" />  
    <use xlink:href="#flag" fill="url(#Lg)" />    
 </svg> 
 </div>

Анимация при наведении курсора

begin="flag.mouseover" end="flag.mouseout"

.container {
width:40vw;
height:40vh;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 400 300">
<defs>
<linearGradient id="Lg"  x2="100%" >
      <stop offset="0%"   stop-color="#0096F7" />
      <stop offset="25%" stop-color="#A4D6F7" />
      <stop offset="50%" stop-color="#0096F7" />
       <stop offset="75%" stop-color="#A4D6F7" />
        <stop offset="100%" stop-color="#0096F7" />
    </linearGradient> 
    <linearGradient id="Le"  x2="100%" >
      <stop offset="0%"   stop-color="#FFD700" />
      <stop offset="27%" stop-color="#FFF5BB" />
      <stop offset="50%" stop-color="#FFD700" />
       <stop offset="77%" stop-color="#FFF5BB" />
        <stop offset="100%" stop-color="#FFD700" />
    </linearGradient>

<path id="flag" transform="scale(1,0.7)"  d="M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z">
<animate dur="1.8s" begin="flag.mouseover" end="flag.mouseout" attributeName="d" fill="freeze" repeatCount="indefinite" values="
M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z;
M20 20Q28 19.8 36 20Q44 20.5 52 21.2Q60 22 68 22.9Q76 23.5 84 23.8Q92 23.6 100 22.9Q108 21.7 116 20Q124 18 132 15.9Q140 13.9 148 12.4Q156 11.5 164 11.4Q172 12.3 180 14.1L180 174.1Q172 172.3 164 171.4Q156 171.5 148 172.4Q140 173.9 132 175.9Q124 178 116 180Q108 181.7 100 182.9Q92 183.6 84 183.8Q76 183.5 68 182.9Q60 182 52 181.2Q44 180.5 36 180Q28 179.8 20 180Z;
M20 20Q28 19.6 36 19.4Q44 19.5 52 20Q60 20.8 68 21.8Q76 22.8 84 23.8Q92 24.5 100 24.8Q108 24.4 116 23.5Q124 22 132 20Q140 17.7 148 15.3Q156 13.1 164 11.4Q172 10.5 180 10.5L180 170.5Q172 170.5 164 171.4Q156 173.1 148 175.3Q140 177.7 132 180Q124 182 116 183.5Q108 184.4 100 184.8Q92 184.5 84 183.8Q76 182.8 68 181.8Q60 180.8 52 180Q44 179.5 36 179.4Q28 179.6 20 180Z;
M20 20Q28 19.5 36 19Q44 18.8 52 18.8Q60 19.2 68 20Q76 21.1 84 22.4Q92 23.6 100 24.8Q108 25.5 116 25.7Q124 25.3 132 24.1Q140 22.3 148 20Q156 17.4 164 14.7Q172 12.3 180 10.5L180 170.5Q172 172.3 164 174.7Q156 177.4 148 180Q140 182.3 132 184.1Q124 185.3 116 185.7Q108 185.5 100 184.8Q92 183.6 84 182.4Q76 181.1 68 180Q60 179.2 52 178.8Q44 178.8 36 179Q28 179.5 20 180Z;
M20 20Q28 19.6 36 19Q44 18.5 52 18.1Q60 18 68 18.2Q76 18.9 84 20Q92 21.4 100 22.9Q108 24.4 116 25.7Q124 26.5 132 26.7Q140 26.1 148 24.7Q156 22.6 164 20Q172 17.1 180 14.1L180 174.1Q172 177.1 164 180Q156 182.6 148 184.7Q140 186.1 132 186.7Q124 186.5 116 185.7Q108 184.4 100 182.9Q92 181.4 84 180Q76 178.9 68 178.2Q60 178 52 178.1Q44 178.5 36 179Q28 179.6 20 180Z;
M20 20Q28 19.8 36 19.4Q44 18.8 52 18.1Q60 17.5 68 17.1Q76 17.2 84 17.6Q92 18.6 100 20Q108 21.7 116 23.5Q124 25.3 132 26.7Q140 27.5 148 27.6Q156 26.9 164 25.3Q172 22.9 180 20L180 180Q172 182.9 164 185.3Q156 186.9 148 187.6Q140 187.5 132 186.7Q124 185.3 116 183.5Q108 181.7 100 180Q92 178.6 84 177.6Q76 177.2 68 177.1Q60 177.5 52 178.1Q44 178.8 36 179.4Q28 179.8 20 180Z;
M20 20Q28 20.2 36 20Q44 19.5 52 18.8Q60 18 68 17.1Q76 16.5 84 16.2Q92 16.4 100 17.1Q108 18.3 116 20Q124 22 132 24.1Q140 26.1 148 27.6Q156 28.5 164 28.6Q172 27.7 180 25.9L180 185.9Q172 187.7 164 188.6Q156 188.5 148 187.6Q140 186.1 132 184.1Q124 182 116 180Q108 178.3 100 177.1Q92 176.4 84 176.2Q76 176.5 68 177.1Q60 178 52 178.8Q44 179.5 36 180Q28 180.2 20 180Z;
M20 20Q28 20.4 36 20.6Q44 20.5 52 20Q60 19.2 68 18.2Q76 17.2 84 16.2Q92 15.5 100 15.2Q108 15.6 116 16.5Q124 18 132 20Q140 22.3 148 24.7Q156 26.9 164 28.6Q172 29.5 180 29.5L180 189.5Q172 189.5 164 188.6Q156 186.9 148 184.7Q140 182.3 132 180Q124 178 116 176.5Q108 175.6 100 175.2Q92 175.5 84 176.2Q76 177.2 68 178.2Q60 179.2 52 180Q44 180.5 36 180.6Q28 180.4 20 180Z;
M20 20Q28 20.5 36 21Q44 21.2 52 21.2Q60 20.8 68 20Q76 18.9 84 17.6Q92 16.4 100 15.2Q108 14.5 116 14.3Q124 14.7 132 15.9Q140 17.7 148 20Q156 22.6 164 25.3Q172 27.7 180 29.5L180 189.5Q172 187.7 164 185.3Q156 182.6 148 180Q140 177.7 132 175.9Q124 174.7 116 174.3Q108 174.5 100 175.2Q92 176.4 84 177.6Q76 178.9 68 180Q60 180.8 52 181.2Q44 181.2 36 181Q28 180.5 20 180Z;
M20 20Q28 20.4 36 21Q44 21.5 52 21.9Q60 22 68 21.8Q76 21.1 84 20Q92 18.6 100 17.1Q108 15.6 116 14.3Q124 13.5 132 13.3Q140 13.9 148 15.3Q156 17.4 164 20Q172 22.9 180 25.9L180 185.9Q172 182.9 164 180Q156 177.4 148 175.3Q140 173.9 132 173.3Q124 173.5 116 174.3Q108 175.6 100 177.1Q92 178.6 84 180Q76 181.1 68 181.8Q60 182 52 181.9Q44 181.5 36 181Q28 180.4 20 180Z;
M20 20Q28 20.2 36 20.6Q44 21.2 52 21.9Q60 22.5 68 22.9Q76 22.8 84 22.4Q92 21.4 100 20Q108 18.3 116 16.5Q124 14.7 132 13.3Q140 12.5 148 12.4Q156 13.1 164 14.7Q172 17.1 180 20L180 180Q172 177.1 164 174.7Q156 173.1 148 172.4Q140 172.5 132 173.3Q124 174.7 116 176.5Q108 178.3 100 180Q92 181.4 84 182.4Q76 182.8 68 182.9Q60 182.5 52 181.9Q44 181.2 36 180.6Q28 180.2 20 180Z
"/>
</path>
</defs>  

 
   <use xlink:href="#flag" y="110" fill="url(#Le)" />  
    <use xlink:href="#flag" fill="url(#Lg)" />    
 </svg> 
 </div>

1
  • @BlackStar1991 Посмотри ещё примеры. 6 ноя 2020 в 16:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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