HTML
<svg width="1000" height="500" viewBox="0 0 1000 500" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example of using variable-widths strokes and mask to create Illustrator like Offset Path effect in SVG</desc>
<defs>
<filter id="erode">
<feMorphology operator="erode" in="SourceGraphic" radius="9" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" in="SourceGraphic" radius="9" />
</filter>
<path id="head_path" d="M133.833,139.777c1.691-5.258-4.5-35.5,14-68.291
c1.378-2.441,23.737,8.274,24.5,6.291s-20.539-13.6-22.5-16c-1.17-1.432,0.474-22.626,0.047-25.318
c-0.717-4.539-11.547-22.682-22.547-23.182c-19.14-0.87-55.878-4.634-67,0c-12,5-39.201,32.677-24,33
c70.5,1.5,96.449,5.894,96.347,11.07c-39.347-5.07-95.316-5.211-96.347-2.112c3.857,8.872-10.636,21.134-16.726,24.486
c-3.27,1.801-13.25,7.173-8.274,12.056c4.264,4.185,12.52,7.244,18.464,6.08c0.318,4.996-2.196,9.538-1.349,14.406
c5.372,1.373,11.055,1.833,16.271,3.587c-7.567-0.061-17.938-1.842-18.309,8.013c2.337,1.114,4.219,2.682,6.887,2.551
c1.228,6.608-5.097,11.978,1.798,16.968c8.671,6.274,30.663,7.095,30.592,7.637c-0.354,2.693,0.596,3.623,3.334,8.759
C80.914,155.454,121.946,144.063,133.833,139.777z"/>
<mask id="myMask" maskUnits="userSpaceOnUse">
<use xlink:href="#head_path" fill="#FFFFFF" stroke="#000000" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" />
</mask>
</defs>
<rect x="0" y="0" width="600" height="600" fill="#222222" fill-opacity="0.3"/>
<!-- Dilated shape (orange) -->
<use x="10" y="10" xlink:href="#head_path" fill="#FFAA00" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" filter="url(#dilate)"/>
<!-- Original shape (blue) -->
<use x="10" y="10" xlink:href="#head_path" fill="#4477FF" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Eroded shape (yellow) -->
<use...