CodePen

HTML

            
              <svg class="multiply" width="100" height="100" viewbox="0 0 8 8">
  <circle fill="cyan" cx="4" cy="3" r="2" />
  <circle fill="yellow" cx="3" cy="5" r="2" />
  <circle fill="magenta" cx="5" cy="5" r="2" />
</svg>
<svg class="screen" width="100" height="100" viewbox="0 0 8 8">
  <circle fill="red" cx="4" cy="3" r="2" />
  <circle fill="lime" cx="3" cy="5" r="2" />
  <circle fill="blue" cx="5" cy="5" r="2" />
</svg>
            
          
!

CSS

            
              $size : 10rem;

html, body {
  height: 100%;  
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

svg {
  width: $size;
  height: $size;
  margin: 0 $size/10;
  box-shadow: 0 0 0 .5rem rgba(0,0,0,.125);
}

.multiply { background: white; }
.multiply circle { mix-blend-mode: multiply; }

.screen { background: black; }
.screen circle { mix-blend-mode: screen; }

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................