SVG + CSS

by wittnl

HTML

<svg>
  <g><rect width="100" height="100"/></g>
  <g><circle r="50"/></g>
</svg>

CSS

@media screen and (min-width: 600px) {
  circle {
    fill-opacity: 0.3;
    cx: 50vw;
  }
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

svg {
  width: 100%;
  height: 100%;
}

circle {
  fill: #ff00ff;
}

rect {
  fill: #00FF00;
}