육각형 타일링

<div class="wrap"><svg viewBox="0 0 180 208" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
  <defs>
    <polygon id="hex" points="20,0 10,17.32 -10,17.32 -20,0 -10,-17.32 10,-17.32"/>
    <pattern id="hx" width="60" height="34.64" patternUnits="userSpaceOnUse">
      <rect width="60" height="34.64" fill="#f2f6f3"/>
      <g fill="none" stroke="#2f7d5c" stroke-width="1.6">
        <use href="#hex" x="-60" y="-34.64"/>
        <use href="#hex" x="-60" y="0"/>
        <use href="#hex" x="-60" y="34.64"/>
        <use href="#hex" x="0" y="-34.64"/>
        <use href="#hex" x="0" y="0"/>
        <use href="#hex" x="0" y="34.64"/>
        <use href="#hex" x="60" y="-34.64"/>
        <use href="#hex" x="60" y="0"/>
        <use href="#hex" x="60" y="34.64"/>
        <use href="#hex" x="-30" y="-17.32"/>
        <use href="#hex" x="-30" y="17.32"/>
        <use href="#hex" x="-30" y="51.96"/>
        <use href="#hex" x="30" y="-17.32"/>
        <use href="#hex" x="30" y="17.32"/>
        <use href="#hex" x="30" y="51.96"/>
        <use href="#hex" x="90" y="-17.32"/>
        <use href="#hex" x="90" y="17.32"/>
        <use href="#hex" x="90" y="51.96"/>
      </g>
      <animateTransform attributeName="patternTransform" type="translate" from="0 0" to="60 0" dur="11s" repeatCount="indefinite"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#hx)"/>
</svg></div><span class="tag">hexagon tiling</span>

.wrap{position:absolute;inset:0;overflow:hidden}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(30,60,45,.82);
  color:#f2f6f3;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}