<figure>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 140 110">
		<title>'clip-rule' example</title>
		<defs>
			<style>
				.nonzero {
					clip-rule: nonzero;
				}

				.evenodd {
					clip-rule: evenodd;
				}
			</style>

			<path id="circles" d="M25,10 A20,20 0,1 0 25,50 A20,20 1,1 0 25,10 M45,10 A20,20 0,1 0 45,50 A20,20 1,1 0 45,10" />

			<clipPath id="clip-nonzero">
				<use class="nonzero" xlink:href="#circles" />
			</clipPath>

			<clipPath id="clip-evenodd">
				<use class="evenodd" xlink:href="#circles" y="50"/>
			</clipPath>
		</defs>

		<g>
			<!-- non-zero clip-rule -->
			<rect clip-path="url(#clip-nonzero)"
						x="0" y="5" width="70" height="50"
						fill="cornflowerblue" />
			<text x="15" y="54" font-size="5" fill="white">non-zero clip-rule</text>
		</g>

		<g>
			<!-- equivalent non-zero fill-rule -->
			<use fill-rule="nonzero"
					 xlink:href="#circles" x="70" y="0"
					 stroke="cornflowerblue" />
			<text x="86" y="54" font-size="5" fill="white">non-zero fill-rule</text>
		</g>
		
		<g>
			<!-- even-odd clip-rule -->
			<rect clip-path="url(#clip-evenodd)"
						x="0" y="55" width="70" height="50"
						fill="goldenrod"/>
			<text x="14" y="105" font-size="5" fill="white">even-odd clip-rule</text>
		</g>
		
		<g>
			<!-- equivalent even-odd fill-rule -->
			<use fill-rule="evenodd"
					 xlink:href="#circles" x="70" y="50"
					 stroke="goldenrod" />
			<text x="85" y="105" font-size="5" fill="white">even-odd fill-rule</text>
		</g>
	</svg>
	<figcaption></figcaption>
</figure>
html {
  background: #1F2933;
  color: white;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid: auto/repeat(1, 1fr);
  grid-gap: 0;
  max-width: 800px;
  margin: 0 auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.