Timeline POC

by Nate

HTML

<!-- <svg viewBox="0 0 100 10" width="100" height="10"> -->
<div class="graphic">
  <!-- <svg viewBox="0 0 100 10">
    <line x1="0" y1="5" x2="500" y2="5" class="timeline-line"></line>
    <rect x="5" y="2.5" width="5" height="5" class="timeline-event"></rect>
    <rect x="20" y="2.5" width="5" height="5" class="timeline-event"></rect>
    <rect x="80" y="2.5" width="5" height="5" class="timeline-event"></rect>
    <rect x="97.5" y="2.5" width="5" height="5" class="timeline-event"></rect>
  </svg> -->
  <span>Hi my name is Nathan and I'm awesome! I would like this to <em>span</em> the width of its container and then some so I can verify the overflow behavior.</span>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  border: solid 1px blue;
}

.graphic {
  font-size: 2rem;
  margin: 50% 0;
  /* padding: 0 2vw; */
  /* width: 100%; */
  /* height: 100%; */
  border: solid 1px green;
  overflow-x: auto;
  white-space: nowrap;
}

svg {
  display: block;
  border: solid 1px red;
  /* overflow-x: visible; */
}

.timeline-line {
  stroke: black;
  stroke-width: 0.25;
}

.timeline-event {
  stroke: black;
  stroke-width: 0.5;
  fill-opacity: 0;
}