zYBVwoW

index.html

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1"   style="display:none;">
    <defs>
        <symbol id="compass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.7 1059.11">
  <defs>

          </defs>
  <circle class="cls-1" cx="535.81" cy="528.4" r="180.08"/>
  <text class="cls-2" transform="translate(130.37 551.16)">W</text>
  <text class="cls-2" transform="translate(505.35 155.28)">N</text>
  <text class="cls-2" transform="translate(511.16 939.53)">S</text>
  <text class="cls-2" transform="translate(876.47 551.16)">E</text>
  <line class="cls-3" x1="250.45" y1="529.53" x2="818.18" y2="529.53"/>
  <line class="cls-3" x1="533.83" y1="241.56" x2="534.31" y2="802.83"/>
  <line class="cls-3" x1="0.35" y1="0.35" x2="1067.35" y2="1058.75"/>
  <line class="cls-3" x1="1067.35" y1="0.35" x2="0.35" y2="1058.75"/>
  <path class="cls-4" d="M952.35,444.33a53.35,53.35,0,0,0-14,3.08,50,50,0,0,0-28.93,28.89,46.71,46.71,0,0,0-3.09,15.89c-.29,11.08,1.68,18.06,8.08,28.66,3.54,5.85,7.18,11.27,18.42,27.3,5.95,8.49,10.56,15.08,14,20,4.8,6.93,5.28,7.46,7.4,8.08a6,6,0,0,0,6.14-1.77c.38-.44,2.62-3.58,5-7,4.1-5.93,15.13-21.7,16.29-23.29,1.27-1.74,9-13,10.94-15.88,7.23-10.92,10.33-17,11.81-23.37a51.51,51.51,0,0,0,.38-19.33,49.44,49.44,0,0,0-41-40.78A48.05,48.05,0,0,0,952.35,444.33Zm7.72,29.16a20.76,20.76,0,0,1,8.35,36.83,21.7,21.7,0,0,1-8,3.74,16,16,0,0,1-4.47.36,17.21,17.21,0,0,1-4.53-.33,21,21,0,0,1-15.92-16.23,29.84,29.84,0,0,1,0-8.12,21,21,0,0,1,18-16.55A28.42,28.42,0,0,1,960.07,473.49Z" transform="translate(-419.65 -4.15)"/>
        </symbol>

    </defs>
</svg>

<svg class="compass">
  <use xlink:href="#compass"></use>
    
</svg>
      </div>

style.scss

body {
  background: green;
}
.container {
    display: grid;
}

.hero {
    background: url("/assets/images/marek-piwnicki-wxLZQ3vCSYs-unsplash@0.5x.jpg");
}
#compass {
    .cls-1 {
        fill: #d8d8d8;
        opacity: 0.5;
    }

    .cls-1,
    .cls-3 {
        stroke: #d8d8d8;
    }

    .cls-2 {
        font-size: 77.44px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: 700;
    }

    .cls-3 {
        fill: none;
      stroke-width: 3;
    }

    .cls-4 {
        fill: #ffce00;
    }
}
#compass .cls-1 {
    fill: #d8d8d8;
    stroke: #d8d8d8;
}

#continent .africa {
    fill: orange;
}

zybvwow.markdown

zYBVwoW

A Pen by Carl Tanner on CodePen.

License.

INIT: codepen https://codepen.io/captproton/pen/zYBVwoW