как сделать фигуры с закругленными углами с помощью clip и svg?

Рейтинг: 1Ответов: 1Опубликовано: 01.04.2023

svg фигура

с помощью clip

Все никак не могу сделать фигуры

css html svg clip-path
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Вариант CSS + clip-path

Я буду делать шестиугольник с помощью clip-path.

.hex {
  width: 200px;
  display: inline-block;
  color:orange;
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 90%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
<div class="hex"></div>

Затем я применю фильтр SVG:

введите сюда описание изображения

.hex {
  width: 200px;
  display: inline-block;
  color:orange;
  filter: url('#goo');
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 86.6%; /* 100%*cos(30) */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

И в обратном направлении:

.hex {
  width: 200px;
  display: inline-block;
  margin:0 5px;
  color:orange;
  filter: url('#goo');
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 115%; /* 100%/cos(30)  */
  clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Свободный перевод ответа от участника @Temani Afif.

Вариант SVG Shapes + svg filter feColorMatrix

Берем svg path для 8-ми угольной звезды с острыми лучами

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="400" height="400" viewBox="0 0 400 400" >  
   
  <path  d="m200.1 27.9 32.7 91.9 88.1-41.9-41.9 88.1 91.9 32.7-91.9 32.7 41.9 88.1L232.8 277.5 200.1 369.4 167.5 277.5 79.4 319.4 121.3 231.3 29.4 198.7 121.3 166 79.4 77.9 167.5 119.8Z" style="fill:crimson;"/>
</svg>

Добавляем комбинацию фильтров: feColorMatrix и

feComposite in="SourceGraphic" in2="goo" operator="atop"/>
Обратите внимание на значение оператора atop

и после применения фильтров лучи закругляются

   



<svg version="1.1" 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>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
  <path filter="url(#goo)" d="m200.1 27.9 32.7 91.9 88.1-41.9-41.9 88.1 91.9 32.7-91.9 32.7 41.9 88.1L232.8 277.5 200.1 369.4 167.5 277.5 79.4 319.4 121.3 231.3 29.4 198.7 121.3 166 79.4 77.9 167.5 119.8Z" style="fill:crimson;"/>
</svg>