<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.