Três maneiras de criar blots com CSS e SVG

Os blobs são formas suaves, amorfas e gelatinosas, geralmente extravagantes e engraçadas. Eles podem ser usados ​​como ilustrações e efeitos de fundo na web.

Então, como eles funcionam? Claro, você pode abrir algum tipo de editor gráfico e criá-los, certo? Claro que é legal. Mas estamos escrevendo sobre truques de CSS aqui, e seria muito mais interessante ver as possibilidades que CSS e SVG nos oferecem - dois de nossos ingredientes favoritos!

. .

SVG

- . SVG - Illustrator, Sketch, Figma - , SVG.

<circle cx="100" cy="100" r="40" fill="red" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

SVG <circle>



:

cx



X .

cy



Y.

r



- .

fill



.

40px    100px X 100px Y. .

:

<svg height="300" width="300">
  <circle cx="80" cy="80" r="40" fill="red" />
  <circle cx="120" cy="80" r="40" fill="red" />
  <circle cx="150" cy="80" r="40" fill="red" />
  <circle cx="150" cy="120" r="40" fill="red" />
  <circle cx="100" cy="100" r="40" fill="red" />
</svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

<svg>



, . , . - SVG, .

... , <ellipse>



<circle>



:

<ellipse cx="200" cy="80" rx="100" ry="50" fill="red" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

 , , (rx)



(ry)



. , , . <ellipse>



.

, - , , , CSS SVG. border-radius



.

.circle {
  border-radius: 50%;
  height: 50px;
  width: 50px;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

… .

SVG-

<path>



SVG . . , , , .

<path>



    , :

M



 –

L



 –

C



 –

Q 



–

Z



–

(C)



. , M



Z



.

, , , Google Maps, . , , .

…

<svg xmlns="http://www.w3.org/2000/svg">
  <path
    fill="#24A148"
    d=""
  />
</svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

d



. , , , . :

<path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, (10 10)



, M



. (C)



. , . «» : (20 20)



, (40 20)



.

.

, , , . , ,  , , , , d



<path>



, .

, , , . , , .



www.blobmaker.app

CSS SVG

SVG <path>



? , ( div) ? - . , , .

SVG, , .

–

, SVG. <filter>



HTML SVG, , <circle>



CSS  .

circle {
  filter: url("#id_of_filter");
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

<filter>



- , , , :

• <feGaussianBlur>
  
  
  
  

  
  
  
  
  

• <feImage>
  
  
  
  

  
  
  
  
  

• <feMerge>
  
  
  
  

  
  
  
  
  

• <feColorMatrix>
  
  
  
  

  
  
  
  
  

• … .

  
  
  
  
  

, <feGaussianBlur>



<feColorMatrix>.

<feGaussianBlur>



, : . (stdDeviation) in



.

in



:

SourceGraphic



-

SourceAlpha



- - .

, <feGaussianBlur>



:

<feGaussianBlur in="SourceGraphic" stdDeviation="30" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

HTML , :

<!-- The SVG filter -->
<svg style="position: absolute; width: 0; height: 0;">
  <filter id="goo">
    <feGaussianBlur in="SourceGraphic" stdDeviation="30" />
  </filter>
</svg>

<!-- The blob -->
<div class="hooks-main">
  <div></div>
  <div></div>
</div>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . CSS :

, . , . . SVG, <feColorMatrix>



.

<feColorMatrix>



:

in



- , , <feGaussianBlur>



.

values



- .

values



. , . :

new pixel color value = ( values matrix ) × ( current pixel color value )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. :

[F-red1 F-green1 F-blue1 F-alpha1 F-constant1
 F-red2 F-green2 F-blue2 F-alpha2 F-constant2
 F-red3 F-green3 F-blue3 F-alpha3 F-constant3
 F-red4 F-green4 F-blue4 F-alpha4 F-constant4]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

F-red



0 1.

F-constant



- , ( ) .

…

RGBA rgba (214, 232, 250, 1). , .

, , , , .

MDN.

:

<filter id="goo">
  <feGaussianBlur in="SourceGraphic" stdDeviation="30" />
  <feColorMatrix
    in="blur"
    values="1 0 0 0 0 
            0 1 0 0 0 
            0 0 1 0 0 
            0 0 0 30 -7"
  />
</filter>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, .

, , .

CSS border-radius

, CSS border-radius



. , , . , , . , .

, border-radius :

.rounded {
  border-radius: 25%;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Essa é uma boa maneira de manter todos os ângulos consistentes. Mas as manchas não são tão uniformes. Queremos que alguns cantos sejam mais arredondados do que outros para que alguns deles pareçam pegajosos. É por isso que escolhemos propriedades constituintes border-radius



, por exemplo:

.element {
  border-top-left-radius: 70% 60%;
  border-top-right-radius: 30% 40%;
  border-bottom-right-radius: 30% 60%;
  border-bottom-left-radius: 70% 40%;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Como você pode ver, cada propriedade assume dois valores. Um para cada borda do canto, o que nos dá muita flexibilidade para dobrar o elemento em formas interessantes. Podemos então adicionar uma cor de fundo, preenchê-lo com um gradiente ou até mesmo definir uma sombra para obter um efeito bacana.