svg noise

svg noise

by Csaba Hellinger

HTML

<svg viewBox="0 0 1 1">

  <filter id="coolEffect" x="0" y="0" ,="" width="1" height="1">
    <feTurbulence baseFrequency="100" result="n1" seed="123123" numOctaves="2">
    </feTurbulence>
    
    <feColorMatrix values=" 
               .5    0  0  0    0
               .5    0  0  0    0
               .5    0  0  0    0
               0    0  0  1.5 -0.5" in="n1" result="n2">
    </feColorMatrix>

    <feComponentTransfer in="n2" result="n3">
      <feFuncA type="linear" slope="1.0"></feFuncA>
    </feComponentTransfer>
    
    
    <feBlend in2="SourceGraphic" in="n3" mode="normal">
    </feBlend>
   
    
    
  </filter>
  
  
  <rect x="0" y="0" width="1" height="0.8" fill="#ddd" filter="url(#coolEffect)" />

</svg>

<p>
color matrix info: https://css-tricks.com/creating-patterns-with-svg-filters/
</p>

CSS

svg {
  width: 700px;
  border: 1px solid black;
  background: skyblue;
}