<div class="editor" />

body {
  margin: 0;
  padding: 0;
}

.editor {
  width: 100%;
  height: 100vh;
  background: #eee;
}

import * as pikaso from "https://cdn.skypack.dev/[email protected]";

const editor = new Pikaso({
  container: document.querySelector('.editor'),
  selection: {
    transformer: {
      borderStroke: '#262626',
      anchorColor: '#262626',
      anchorStroke: '#262626',
      anchorFill: '#262626',
      anchorSize: 10
    }
  },
  measurement: {
    background: {
      fill: 'purple',
      cornerRadius: 5
    },
    text: {
      fill: '#fff',
      padding: 5,
      fontSize: 14,
      fontStyle: 'bold'
    }
  }
})

const path = 'M342.315,337.711l-25.981,25.977c-2.223-1.212-4.625-2.415-7.048-3.777  c-22.302-12.368-66.331-42.73-98.447-74.846c-32.186-32.195-62.665-76.239-75.022-98.541c-1.332-2.344-1.876-3.877-3.088-6.071  l24.371-22.904l2.525-2.525c19.309-19.309,19.309-50.613,0-69.923l-38.077-38.076c-19.416-19.416-50.935-19.291-70.197,0.278  l-10.149,10.31c-6.61,8.452-12.216,18.284-16.321,28.768c-3.795,10.015-6.223,19.601-7.274,29.146  c-9.274,76.667,25.755,146.747,120.809,241.84c131.435,131.395,236.67,122.286,241.246,121.774  c9.934-1.172,20.155-4.323,29.86-8.077c10.405-4.066,20.321-9.756,28.733-16.366l10.315-10.142  c19.587-19.259,19.719-50.793,0.295-70.216l-36.63-36.63C392.927,318.405,361.624,318.405,342.315,337.711z'

editor.shapes.svg.draw({
  data: path, 
  fill: 'tomato'
})