<svg viewBox="0 0 280 280" width="280" height="280" x="0"  y="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="grating" x="0" y="0" width="1" height="1">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalStripes)"/>
    </mask>
  </defs>
  <g id="horizStripes">
    <rect fill="#FF8A00" height="40" width="100%" x="0" y="0"/>    
    <rect fill="#E52E71" height="10" width="100%" x="0" y="40"/>
    <rect fill="#FFFFFF" height="10" width="100%" x="0" y="50"/>
    <rect fill="#E52E71" height="70" width="100%" x="0" y="60"/>
    
    <rect fill="#100e17" height="20" width="100%" x="0" y="130"/>
    
    <rect fill="#E52E71" height="70" width="100%" x="0" y="150"/>
    <rect fill="#FFFFFF" height="10" width="100%" x="0" y="220"/>
    <rect fill="#E52E71" height="10" width="100%" x="0" y="230"/>   
    <rect fill="#FF8A00" height="40" width="100%" x="0" y="240"/>
  </g>
  <g id="vertStripes" mask="url(#grating)">
    <rect fill="#FF8A00" width="40" height="100%" y="0" x="0"/>  
    <rect fill="#E52E71" width="10" height="100%" y="0" x="40"/>
    <rect fill="#FFFFFF" width="10" height="100%" y="0" x="50"/>
    <rect fill="#E52E71" width="70" height="100%" y="0" x="60"/>

    <rect fill="#100e17" width="20" height="100%" y="0" x="130"/>
    
    <rect fill="#E52E71" width="70" height="100%" y="0" x="150"/>
    <rect fill="#FFFFFF" width="10" height="100%" y="0" x="220"/>
    <rect fill="#E52E71" width="10" height="100%" y="0" x="230"/>   
    <rect fill="#FF8A00" width="40" height="100%" y="0" x="240"/  
  </g>
</svg>
  <span> = </span>
<svg viewBox="0 0 280 280" width="280"  height="280" x="0"  y="0" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect fill="#FF8A00" height="40" width="100%" x="0" y="0"/>    
    <rect fill="#E52E71" height="10" width="100%" x="0" y="40"/>
    <rect fill="#FFFFFF" height="10" width="100%" x="0" y="50"/>
    <rect fill="#E52E71" height="70" width="100%" x="0" y="60"/>
    
    <rect fill="#100e17" height="20" width="100%" x="0" y="130"/>
    
    <rect fill="#E52E71" height="70" width="100%" x="0" y="150"/>
    <rect fill="#FFFFFF" height="10" width="100%" x="0" y="220"/>
    <rect fill="#E52E71" height="10" width="100%" x="0" y="230"/>   
    <rect fill="#FF8A00" height="40" width="100%" x="0" y="240"/>
  </g>
</svg>
<span> + </span>
<svg viewBox="0 0 280 280" width="280"  height="280" x="0"  y="0" xmlns="http://www.w3.org/2000/svg">
  <g mask="url(#grating)">
    <rect fill="#FF8A00" width="40" height="100%" y="0" x="0"/>  
    <rect fill="#E52E71" width="10" height="100%" y="0" x="40"/>
    <rect fill="#FFFFFF" width="10" height="100%" y="0" x="50"/>
    <rect fill="#E52E71" width="70" height="100%" y="0" x="60"/>

    <rect fill="#100e17" width="20" height="100%" y="0" x="130"/>
    
    <rect fill="#E52E71" width="70" height="100%" y="0" x="150"/>
    <rect fill="#FFFFFF" width="10" height="100%" y="0" x="220"/>
    <rect fill="#E52E71" width="10" height="100%" y="0" x="230"/>   
    <rect fill="#FF8A00" width="40" height="100%" y="0" x="240"/>
  </g>
</svg>

<svg width="0" height="0">
  <defs>
    <pattern id="diagonalStripes" x="0" y="0" patternUnits="userSpaceOnUse" width="8" height="8">
      <polygon points="0,4 0,8 8,0 4,0" fill="white"/>
      <polygon points="4,8 8,8 8,4" fill="white"/>
    </pattern>    
  </defs> 
</svg>
  

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

span {
  padding: 0 .5rem;
  font-size: 2rem;
}