.zalgodither {                                                                                                                                          
    image-rendering: pixelated;                                                                                                                           
    width: max-content;                                                                                                                                   
    height: max-content;                                                                                                                                  
    filter: saturate(0) contrast(250);
    position: relative;                                                                                                                    
}                                                                                                                                                       
.zalgodither img, .bayerdither img { z-index: 1; }                                                                                                                      
.zalgodither > *::after {                                                                                                                         
    content: '';                                                                                                                                        
    width: 100%;                                                                                                                                        
    height: 100%;                                                                                                                                       
    opacity: 0.4;
    pointer-events: none;                                                                                                                                       
    position: absolute;                                                                                                                                    
    display: block;                                                                                                                                     
    z-index: 2;                                                                                                                                         
    top:0px;
    left: 0px;                                                                                                                                 
    background-image: url(https://maya.land/assets/bluenoise.png);                                                                                      
    background-repeat: repeat;                                                                                                                          
}

.bayerdither {                                                                                                                                          
    image-rendering: pixelated;                                                                                                                           
    width: max-content;                                                                                                                                   
    height: max-content;                                                                                                                                  
    filter: saturate(0) contrast(250); 
    position: relative;                                                                                                                   
}  
.bayerdither.transparent, .zalgodither.transparent {
    mix-blend-mode: darken;
}                                                                                                                       
.bayerdither.transparent img, .zalgodither.transparent img {
    background-color: white;
}

.bayerdither > *::after {                                                                                                                         
    content: '';                                                                                                                                        
    width: 100%;                                                                                                                                        
    height: 100%;                                                                                                                                       
    opacity: 0.4;
    pointer-events: none;                                                                                                                                       
    position: absolute;                                                                                                                                    
    display: block;                                                                                                                                     
    z-index: 2;                                                                                                                                         
    top:0px;
    left: 0px;                                                                                                                                 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAOklEQVR4nC3KQQFAQAAAwd0EIohANA0uiiiugQgiiLA+5j0AVBewVa/VUGd1qBNgrR5gqW6r8x+7Oj8/xCBur9LU/wAAAABJRU5ErkJggg==');                                                                       
    background-repeat: repeat;                                                                                                                          
}

@keyframes anim {
  from {opacity: 30%;}
  to {opacity: 50%;}
}

.zalgodither.animdither > *::after, .bayerdither.animdither > *::after {
  animation-name: anim;
  animation-duration: 4s; 
    animation-iteration-count: infinite;
  animation-direction: alternate;
}