<div class="site-container">
  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewbox="0 0 48 48">
    <!--
      Note that the <style> tag is included within the SVG element, 
      wrapped within the CDATA tag.
    -->
    <style type="text/css">
      <![CDATA[
        .bar {
          fill: green;
        }

        .horizontal-bar {
          transform: translateY(calc(50% - 4px));
        }

        .vertical-bar {
          fill: darkgreen;
          transform-origin: center;
          transform: rotate(90deg) translateY(calc(50% - 4px));
        }
      ]]>
    </style>
    <g>
      <rect 
        class="bar horizontal-bar" 
        width="100%" height="8" 
        />
      <rect 
        class="bar vertical-bar" 
        width="100%" height="8" 
        x="0" />
    </g>
  </svg>
</div>
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font: 1em/160% sans-serif;
  margin: 0;
  background-color: #dfd;
}

svg {
  max-width: 100%;
  vertical-align: baseline;
}

.site-container {
  padding: 2em;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.