CSS linear gradient as background for SVG's mask and text colour

by SSRRDD

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath -->
<div>

<svg viewBox="0 0 100 100">
  <mask id="myMask">
    <rect x="0" y="0" width="100" height="100" fill = "white"/>
    <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" fill="black"/>
  </mask>
 
  <rect x="0" y="0" width="100" height="100" fill = "white" mask="url(#myMask)" />
</svg>

</div>
<span class = "text"><br><br>Text (some super lengthy long writing)</span>

CSS

html, body, svg
{
  height:100%; padding: 0px;
  margin: 0px;  
}/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

div
{
  background-image: linear-gradient(to right, green, red 200%);
  line-height: 0px;
  width: 50%;
  float:left;
}

.text
{
  background-image: linear-gradient(to right, green -100%, red);
  background-clip: text;
  color: transparent;
  float: right;
}