Render SVG graduation cap

HTML

<!-- first example : wrong 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"/>
    <line class="graduation-line graduation-mid" x1="50" x2="60" y1="260" y2="260"/>
    <text class="graduation-mid graduation-number" style="x: 63px; y: 260px; color: blueviolet;">0</text>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="251.0204081632653" y2="251.0204081632653"/>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="242.0408163265306" y2="242.0408163265306"/>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="233.0612244897959" y2="233.0612244897959"/>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="224.08163265306123" y2="224.08163265306123"/>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="215.10204081632654" y2="215.10204081632654"/>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="206.12244897959184" y2="206.12244897959184"/>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="197.14285714285714" y2="197.14285714285714"/>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="188.16326530612247" y2="188.16326530612247"/>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="179.18367346938777" y2="179.18367346938777"/>
    <line class="graduation-line graduation-mid" x1="50" x2="60" y1="170.20408163265307" y2="170.20408163265307"/>
    <text class="graduation-mid graduation-number" style="x: 63px; y: 170.204px; color: blueviolet;">10</text>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="161.22448979591837" y2="161.22448979591837"/>
    <line class="graduation-line graduation-small" x1="50" x2="55" y1="152.24489795918367" y2="152.24489795918367"/>
    <line...

CSS

line {
    stroke: black;
}

.graduation-number {
    dominant-baseline: central;
}