* {
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  font-size: 12pt;
}

.overlay_container {
    height: 400px;
}
.svg_overlay {
    pointer-events: none;
}
.overlay_shape {
    fill: none;
    stroke: green;
    stroke-width: 2px;
}

/* Could be a pseudo-element: #v1::overlay_shape */
#v1_overlay_shape {
    stroke: blue;
}

#v2_overlay_shape {
    stroke-width: 4px;
}

#v3_overlay_shape, #v2bis_overlay_shape {
    fill: brown;
    stroke: black;
}

#v6_overlay_shape {
    fill: grey;
    opacity: .5;
}

#v2 {
    clip-path: url(#v2_overlay_shape);
}

#v8 {
    mask: url("#v8_overlay_mask");
    -webkit-mask-box-image: url("");
}