output.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" class="container"><defs><style type="text/css"><![CDATA[ 
:root { 
  --container: #fffff;
  --unstable-fill: #ee538b;
  --prerelease-fill: #6929c4;
  --active-fill: #012749;
  --maintenance-fill: #009d9a;
  --text: #161616;
  --text-on-color: #ffffff;
  --text-inverse: #ffffff;
  --border: #e0e0e0;
}

@media (prefers-color-scheme: light) { 
  :root { 
    --container: #fffff;
    --unstable-fill: #ee538b;
    --prerelease-fill: #6929c4;
    --active-fill: #012749;
    --maintenance-fill: #009d9a;
    --text: #161616;
    --text-on-color: #ffffff;
    --text-inverse: #ffffff;
    --border: #e0e0e0;
  }
}

@media (prefers-color-scheme: dark) {
  :root { 
    --container: #161616;
    --unstable-fill: #fff1f1;
    --prerelease-fill: #d4bbff;
    --active-fill: #4589ff;
    --maintenance-fill: #08bdba;
    --text: #f4f4f4;
    --text-on-color: #161616;
    --text-inverse: #161616;
    --border: #393939;
  }
}


.container {
  background: var(--container);
}
.prerelease {
  fill: var(--prerelease-fill);
}
.active {
  fill: var(--active-fill);
}
.maintenance {
  fill: var(--maintenance-fill);
}
.unstable {
  fill: var(--unstable-fill);
}
.bar-join {
  fill: var(--border);
}
.bar-join.unstable, .bar-join.prerelease {
  display: none;
}
.tick text {
  font: 16px IBM Plex Sans;
  fill: var(--text);
}
.axis--y .tick text {
  text-anchor: end;
}
.unstable ~ .label {
  fill: var(--text-inverse);
}
.label {
  fill: var(--text-on-color);
  font: 20px IBM Plex Sans;
  text-anchor: start;
  dominant-baseline: middle;
  text-transform: capitalize;
} ]]></style></defs><g id="bar-container" transform="translate(110, 64)"><g class="axis axis--x" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><g class="tick" opacity="1" transform="translate(115.78505321610365,0)"><line stroke="#89a19d" y2="404" x1="0.5" x2="0.5"></line><text fill="#000" y="0" x="0.5" dy="-10">Jan 2022</text></g><g class="tick" opacity="1" transform="translate(345.15571494678386,0)"><line stroke="#89a19d" y2="404" x1="0.5" x2="0.5" stroke-dasharray="2,2"></line><text fill="#000" y="0" x="0.5" dy="-10">Jan 2023</text></g><g class="tick" opacity="1" transform="translate(574.5263766774641,0)"><line stroke="#89a19d" y2="404" x1="0.5" x2="0.5"></line><text fill="#000" y="0" x="0.5" dy="-10">Jan 2024</text></g><g class="tick" opacity="1" transform="translate(804.5254511800092,0)"><line stroke="#89a19d" y2="404" x1="0.5" x2="0.5" stroke-dasharray="2,2"></line><text fill="#000" y="0" x="0.5" dy="-10">Jan 2025</text></g><g class="tick" opacity="1" transform="translate(1033.8961129106895,0)"><line stroke="#89a19d" y2="404" x1="0.5" x2="0.5"></line><text fill="#000" y="0" x="0.5" dy="-10">Jan 2026</text></g><g class="tick" opacity="1" transform="translate(1263.2667746413697,0)"><line stroke="#89a19d" y2="404" x1="0.5" x2="0.5" stroke-dasharray="2,2"></line><text fill="#000" y="0" x="0.5" dy="-10">Jan 2027</text></g></g><g class="axis axis--y" fill="none" font-size="10" font-family="sans-serif" text-anchor="start"><g class="tick" opacity="1" transform="translate(0,49.54716981132074)"><line stroke="#e1e7e7" x2="1358" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">main</text></g><g class="tick" opacity="1" transform="translate(0,125.77358490566037)"><line stroke="#e1e7e7" x2="1358" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Carbon 9</text></g><g class="tick" opacity="1" transform="translate(0,202)"><line stroke="#e1e7e7" x2="1358" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Carbon 10</text></g><g class="tick" opacity="1" transform="translate(0,278.2264150943396)"><line stroke="#e1e7e7" x2="1358" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Carbon 11</text></g><g class="tick" opacity="1" transform="translate(0,354.4528301886793)"><line stroke="#e1e7e7" x2="1358" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Carbon 12</text></g><line y1="404" y2="404" x2="1358" stroke="#89a19d"></line></g><g><rect class="bar unstable" x="0" y="22.86792452830187" width="1358" height="53.35849056603774"></rect><rect class="bar-join unstable" x="-1" y="22.86792452830187" width="2" height="53.35849056603774" style="opacity: 0;"></rect><text class="label" x="15" y="51.54716981132074" style="opacity: 1;">unstable</text></g><g><rect class="bar maintenance" x="0" y="99.0943396226415" width="171.55668671911155" height="53.35849056603774"></rect><rect class="bar-join maintenance" x="-1" y="99.0943396226415" width="2" height="53.35849056603774" style="opacity: 0;"></rect><text class="label" x="15" y="127.77358490566037" style="opacity: 1;">maintenance</text></g><g><rect class="bar maintenance" x="171.55668671911155" y="175.32075471698113" width="574.9976862563627" height="53.35849056603774"></rect><rect class="bar-join maintenance" x="170.55668671911155" y="175.32075471698113" width="2" height="53.35849056603774" style="opacity: 1;"></rect><text class="label" x="186.55668671911155" y="204" style="opacity: 1;">maintenance</text></g><g><rect class="bar active" x="0" y="175.32075471698113" width="171.55668671911155" height="53.35849056603774"></rect><rect class="bar-join active" x="-1" y="175.32075471698113" width="2" height="53.35849056603774" style="opacity: 0;"></rect><text class="label" x="15" y="204" style="opacity: 1;">active</text></g><g><rect class="bar maintenance" x="1089.6677464136974" y="251.54716981132074" width="268.3322535863026" height="53.35849056603774"></rect><rect class="bar-join maintenance" x="1088.6677464136974" y="251.54716981132074" width="2" height="53.35849056603774" style="opacity: 1;"></rect><text class="label" x="1104.6677464136974" y="280.2264150943396" style="opacity: 1;">maintenance</text></g><g><rect class="bar active" x="171.55668671911155" y="251.54716981132074" width="918.1110596945858" height="53.35849056603774"></rect><rect class="bar-join active" x="170.55668671911155" y="251.54716981132074" width="2" height="53.35849056603774" style="opacity: 1;"></rect><text class="label" x="186.55668671911155" y="280.2264150943396" style="opacity: 1;">active</text></g><g><rect class="bar prerelease" x="22.622859787135585" y="251.54716981132074" width="148.93382693197597" height="53.35849056603774"></rect><rect class="bar-join prerelease" x="21.622859787135585" y="251.54716981132074" width="2" height="53.35849056603774" style="opacity: 0;"></rect><text class="label" x="37.62285978713558" y="280.2264150943396" style="opacity: 1;">prerelease</text></g><g><rect class="bar active" x="1089.6677464136974" y="327.7735849056604" width="268.3322535863026" height="53.35849056603774"></rect><rect class="bar-join active" x="1088.6677464136974" y="327.7735849056604" width="2" height="53.35849056603774" style="opacity: 1;"></rect><text class="label" x="1104.6677464136974" y="356.4528301886793" style="opacity: 1;">active</text></g><g><rect class="bar prerelease" x="937.591855622397" y="327.7735849056604" width="152.07589079130037" height="53.35849056603774"></rect><rect class="bar-join prerelease" x="936.591855622397" y="327.7735849056604" width="2" height="53.35849056603774" style="opacity: 0;"></rect><text class="label" x="952.591855622397" y="356.4528301886793" style="opacity: 1;">prerelease</text></g></g></svg>