JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<svg width="190px" height="190px"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="imgpattern" x="0" y="0" width="100%" height="100%">
      <image width="400" height="400"
             xlink:href="http://lorempixel.com/400/400/"/>
    </pattern>
  </defs>
  <polygon fill="url(#imgpattern)" fill-opacity="0" class="path" style="stroke:#000000;stroke-width:2.5px" points="136.737609507049,188.692435121084 63.2623904929514,188.692435121084 11.3075648789165,136.737609507049 11.3075648789165,63.2623904929514 63.2623904929513,11.3075648789165 136.737609507049,11.3075648789165 188.692435121084,63.2623904929513 188.692435121084,136.737609507049">
  </polygon>
</svg>
<svg width="190px" height="190px"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="imgpattern2" x="0" y="0" width="100%" height="100%">
      <image width="400" height="400"
             xlink:href="http://lorempixel.com/400/400/"/>
    </pattern>
  </defs>
  <polygon fill="url(#imgpattern2)" fill-opacity="0" class="path" style="stroke:#000000;stroke-width:2.5px" points="136.737609507049,188.692435121084 63.2623904929514,188.692435121084 11.3075648789165,136.737609507049 11.3075648789165,63.2623904929514 63.2623904929513,11.3075648789165 136.737609507049,11.3075648789165 188.692435121084,63.2623904929513 188.692435121084,136.737609507049">
  </polygon>
</svg>

CSS

.path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: dash 2s linear, image 1s linear 2s;
  animation-fill-mode: forwards;
}

@keyframes image {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

@keyframes dash {
  from {
    stroke-dashoffset: 600;
  }
  to {
    stroke-dashoffset: 0;
  }
}