JSFiddle - React, Tailwind, and code Playground

by tnhu

HTML

<!-- 
  To create a <mask>, make things you want to keep white. 
  The things you want to be invisible make black. 
  Colours in between will result in translucency.
-->

<svg viewBox="-1 -1 2 2" version="1.1">
  <defs>    
    <mask id="mask">
      <circle cx="0" cy="0" r="50%" fill="white" />
      <circle cx="0" cy="0" r="36%" fill="black" />
      <path d="M 0.5877852522924731 0.8090169943749475 A 1 1 0 0 1 -0.587785252292473 0.8090169943749475 L 0 0" fill="black"></path>
    </mask>
  </defs>

  <path d="M -1.8369701987210297e-16 -1 A 1 1 0 0 1 0.587785252292474 0.8090169943749468 L 0 0" fill="blue" clip-path="url(#mask)" mask="url(#mask)"></path>
  <path d="M -0.8090169943749475 -0.587785252292473 A 1 1 0 0 1 -1.8369701987210297e-16 -1 L 0 0" fill="green" clip-path="url(#mask)" mask="url(#mask)"></path>
  <path d="M -0.587785252292473 0.8090169943749475 A 1 1 0 0 1 -0.8090169943749475 -0.587785252292473 L 0 0" fill="red" clip-path="url(#mask)" mask="url(#mask)"></path>
</svg>

CSS

body {
  background-color: yellow;
}

svg {
  width: 100px;
  height: 100px;
  border: 1px dotted #ddd;
}