SVG Mask

by Roman Bruckner

HTML

<svg width="500" height="500">

  <defs>

    <circle id="circle" r="30"></circle>

    <path id="star" d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218 Z" />

    <g id="group">
      <rect width="100" height="100"></rect>
      <circle cx="100" cy="50" r="20"></circle>
      <text>ROMAN</text>
    </g>


    <!--
          white = everything under a white pixel will be visible
          black = everything under a black pixel will be invisible 
      -->

    <mask id="circle-outline">
      <use href="#circle" stroke-width="12" stroke="white" fill="white"></use>
      <use href="#circle" stroke-width="6" stroke="black" fill="black"></use>
    </mask>


    <mask id="star-outline">
      <use href="#star" stroke="white" stroke-width="12" fill="white"></use>
      <use href="#star" stroke="black" stroke-width="10" fill="black"></use>
      <!--
          8 / 2 = 4 pixels padding
          (12 - 8) / 2 = 2 pixels stroke width
      -->
    </mask>

    <mask id="group-outline">
      <use href="#group" stroke="white" stroke-width="14" fill="white"></use>
      <use href="#group" stroke="black" stroke-width="10" fill="black"></use>
    </mask>

  </defs>

  <!-- Simple shape -->
  <g transform="translate(100,100)">
    <use href="#circle" stroke="#4a7bcb" stroke-width="2" fill="white"></use>
    <rect x="-50" y="-50" width="100" height="100" mask="url(#circle-outline)" fill="#48cba4"></rect>
  </g>

  <!-- Advanced shape -->
  <g transform="translate(200,100)">
    <use href="#star" stroke="#4a7bcb" stroke-width="2" fill="white"></use>
    <rect x="-20" y="-20" width="100" height="100" mask="url(#star-outline)" fill="#80aaff"></rect>
  </g>

  <!-- Compoud shape -->
  <g transform="translate(300,50)">
    <use href="#group" stroke="#4a7bcb" stroke-width="2" fill="white"></use>
    <rect x="-50" y="-50" width="200" height="200" mask="url(#group-outline)" fill="#c86653"></rect>
  </g>

  <g...