Render SVG graduation cap

HTML

<!-- first example : no text placement -->
<svg class="column" style="width: 100px; height: 300px;">
  <svg class="rightpart" style="width: 100px; height: 300px;" mask="linear-gradient(transparent, black 40px)">
    <line y1="0" x1="50" x2="50" y2="260"/>
    <text class="graduation-mid graduation-number" style="color: blueviolet;">0</text>
    <text class="graduation-mid graduation-number" style="color: blueviolet;">10</text>
    <text class="graduation-allocated graduation-number" style="color: blueviolet;">14</text>
    <text class="graduation-mid graduation-number" style="color: blueviolet;">20</text>
    <text class="graduation-initial graduation-number" style="color: blueviolet;">24</text>
  </svg>
</svg>

<!-- second example : invisible or cropped (why ?) -->
<svg class="column" style="width: 100px; height: 300px;">
  <svg class="rightpart" style="width: 100px; height: 300px;" mask="linear-gradient(transparent, black 40px)">
    <line y1="0" x1="50" x2="50" y2="260"/>
    <text class="graduation-mid graduation-number" x="10px" y="10px" style="color: blueviolet;">0</text> <!-- Remove or move this one -->
    <text class="graduation-mid graduation-number" x="63px" y="260px" style="color: blueviolet;">0</text>
    <text class="graduation-mid graduation-number" x="63px" y="170.204px" style="color: blueviolet;">10</text>
    <text class="graduation-allocated graduation-number" x="68px" y="134.286px" style="color: blueviolet;">14</text>
    <text class="graduation-mid graduation-number" x="63px" y="80.4082px" style="color: blueviolet;">20</text>
    <text class="graduation-initial graduation-number" x="68px" y="44.4898px" style="color: blueviolet;">24</text>
  </svg>
</svg>

<!-- third example : mask disabled -->
<svg class="column" style="width: 100px; height: 300px;">
  <svg class="rightpart" style="width: 100px; height: 300px;">
    <line y1="0" x1="50" x2="50" y2="260"/>
    <text class="graduation-mid graduation-number" x="63px"...

CSS

line {
    stroke: black;
}