Outline Offset

This article is an unusual one, it is dedicated to a single css property

While I was working on a vector editor for a while, I've discovered an outline-offset css property. There was a chance that it would be useful for export vector graphics, it can simplify the drawing of outlines a lot.

inner
middle
outer
spaced
<style>
  .div {
    outline: #206e9182 10px solid;
    background: #21f30a;
    width: 60px;
    height: 60px;
    margin: 0 0 10px 0;
    font-size: 12px;
    align-content: center;
    text-align: center;
    border-top-left-radius: 20px;
  }

  .div-1 {
    outline-offset: -10px;
  }
  .div-2 {
    outline-offset: -5px;
  }
  .div-4 {
    outline-offset: 5px;
  }
</style>
<div class="div div-1">inner</div>
<div class="div div-2">middle</div>
<div class="div div-3">outer</div>
<div class="div div-4">spaced</div>

I wish to have an option for drawing outlines for svg paths without doing too much complex math, so let's try it:

<style>
  .path {
    outline: #206e9182 10px solid;
  }
</style>

<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="path path-1" d="M8.0 51.5C-5.6 36.2 4.8 38.0 18.0 40.0C17.4 30.8 17.2 20.9 21.7 17.4C26.9 13.3 34.9 18.4 42.1 20.8C39.5 9.6 37.4 -1.1 58.3 3.5C57.1 23.0 50.0 23.5 42.1 20.8C43.8 28.4 45.9 36.3 41.0 39.5C36.3 42.7 26.6 41.3 18.0 40.0C18.7 53.4 20.1 65.1 8.0 51.5Z" outline="20" fill="#57FA3C"/>
</svg>

Hm, hmm, no, it does not work for svg paths. So I should make outliner on my own. It would take a path, outline width, outline position; and generate another path representing that stroke. There is a lot of work — it should include all features like: dashed stroke, stroke-begin, stroke-end, mitter joint types, so I would implement it after the MVP phase. For now, I would use a simple stroke.