Tres formas de crear borrones con CSS y SVG

Las manchas son formas suaves, amorfas y gelatinosas que suelen ser caprichosas y divertidas. Se pueden utilizar como ilustraciones y efectos de fondo en la web.

Asique, como trabajan? Por supuesto, puedes abrir algún tipo de editor de gráficos y crearlos, ¿verdad? Por supuesto que es genial. Pero estamos escribiendo sobre trucos de CSS aquí, y sería mucho más interesante ver las posibilidades que nos brindan CSS y SVG, ¡dos de nuestros 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%;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ésta es una buena forma de mantener la coherencia de todos los ángulos. Pero las manchas no son tan uniformes. Queremos que algunas esquinas estén más redondeadas que otras para que algunas se vean pegajosas. Por eso elegimos propiedades constituyentes border-radius



, por ejemplo:

.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 puede ver, cada propiedad toma dos valores. Uno para cada borde de la esquina, lo que nos da mucha flexibilidad para doblar el elemento en formas interesantes. Luego podemos agregar un color de fondo, rellenarlo con un degradado o incluso establecer una sombra para obtener un efecto ordenado.