<div class="wobbly-keyline wobbly-keyline--original-size">
  <p>Original size</p>
</div>

<div class="wobbly-keyline wobbly-keyline--fixed-size">
  <p>Forced size – keyline width distorted as it gets forced further out of it's original ratio</p>
</div>
.wobbly-keyline {
  margin: 1rem;
  padding: 1rem;
  background-image: image-url('http://localhost:4000/img/posts/wobbly-box--keyline.svg');
  background-size: 100% 100%;
}

.wobbly-keyline--original-size {
  width: 300px;
  height:300px;
}

.wobbly-keyline--fixed-size {
  width: 600px;
  height:100px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.