20 lines
521 B
XML
20 lines
521 B
XML
<svg viewBox="0 0 100 100">
|
|
<clipPath id="myClip">
|
|
<!--
|
|
Everything outside the circle will be
|
|
clipped and therefore invisible.
|
|
-->
|
|
<circle cx="40" cy="35" r="35" />
|
|
</clipPath>
|
|
|
|
<!-- The original black heart, for reference -->
|
|
<path
|
|
id="heart"
|
|
d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
|
|
|
|
<!--
|
|
Only the portion of the red heart
|
|
inside the clip circle is visible.
|
|
-->
|
|
<use clip-path="url(#myClip)" href="#heart" fill="red" />
|
|
</svg> |