Run
Back to
CSS clip-rule Property
<!DOCTYPE html><html><head><style type="text/css">.wrap { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 24px; color: #333; } h1 { font-size: 18px; margin: 0 0 12px 0; } .examples { display: flex; gap: 24px; align-items: center; } .example { text-align: center; } .example figcaption { margin-bottom: 8px; font-size: 14px; } .svg-sample { width: 200px; height: 200px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); background: #fff; border: 1px solid #e6e6e6; } /* Apply clip-rule to the shapes inside each clipPath */ #clipNonzero circle { clip-rule: nonzero; } #clipEvenodd circle { clip-rule: evenodd; } </style></head><body><div class="wrap"> <h1>SVG clip-rule: nonzero vs evenodd</h1> <div class="examples"> <figure class="example"> <figcaption>Nonzero (default)</figcaption> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="svg-sample"> <defs> <linearGradient id="g1" x1="0" x2="1"> <stop offset="0" stop-color="#ff7e79" /> <stop offset="1" stop-color="#ffd27f" /> </linearGradient> <clipPath id="clipNonzero"> <circle cx="50" cy="50" r="36" /> <circle cx="68" cy="50" r="16" /> </clipPath> </defs> <rect width="100" height="100" fill="url(#g1)" /> <g clip-path="url(#clipNonzero)"> <rect x="0" y="0" width="100" height="100" fill="#4aa3ff" /> <circle cx="42" cy="50" r="6" fill="#ffffff" /> </g> </svg> </figure> <figure class="example"> <figcaption>Even-odd</figcaption> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="svg-sample"> <defs> <linearGradient id="g2" x1="0" x2="1"> <stop offset="0" stop-color="#b794ff" /> <stop offset="1" stop-color="#7af5d1" /> </linearGradient> <clipPath id="clipEvenodd"> <circle cx="50" cy="50" r="36" /> <circle cx="68" cy="50" r="16" /> </clipPath> </defs> <rect width="100" height="100" fill="url(#g2)" /> <g clip-path="url(#clipEvenodd)"> <rect x="0" y="0" width="100" height="100" fill="#ffdd57" /> <circle cx="42" cy="50" r="6" fill="#000000" /> </g> </svg> </figure> </div> </div></body></html>
