Создать паттерн из "кубов"

Question

Есть растровый паттерн:

Как можно создать подобный паттерн в svg?

Не совсем понятно как можно провести половину каждой второй диагонали шестиугольника.

Из наработок есть:

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern" viewBox="0 0 1000 1000" width="20%" height="20%">
      <polygon points="569.2,518 396,618 222.8,518 222.8,318 396,218 569.2,318" fill="none" stroke="orange" stroke-width="2%" />
    </pattern>
  </defs>
  
  <circle cx="200"  cy="200" r="100" stroke="black" fill="url('#pattern')" />
</svg>

Answer 1

Рисуется несколько path заготовка для pattern

<svg width="100" height="100" viewBox="0 0 15 15">

<g fill="none" stroke="orange" stroke-width="0.5">
<path  class="left-shade" d="M0 0l5 3v5l-5 -3z"></path> 
   <path fill="none" stroke="orange" stroke-width="0.5"  class="right-shade" d="M10 0l-5 3v5l5 -3"></path> 
     
 </g> 
</svg>

Затем они клонируются и смещаются

  <use x="5" y="8" xlink:href="#hex"></use>
     <use x="-5" y="8" xlink:href="#hex"></use>

Всё это происходит внутри pattern

Затем можно применять паттерн к окружности :

<svg width="100%" height="100%" viewBox="0 0 1000 1000">
   
   <pattern id="pattern-hexs" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16"> 
         <g id="hex" fill="none" stroke="orange" stroke-width="0.5">
           <path  class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
       <path   class="right-shade" d="M10 0l-5 3v5l5 -3"></path>
     </g>
    
         <use x="5" y="8" xlink:href="#hex"></use>
     <use x="-5" y="8" xlink:href="#hex"></use>
   
   </pattern>
      
    <circle cx="50%" cy="50%" r="50%" fill="url(#pattern-hexs)" stroke="crimson" />
</svg>

Или, например к прямоугольнику

<svg width="100%" height="100%" viewBox="0 0 1000 1000">
   
   <pattern id="pattern-hexs" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16"> 
         <g id="hex" fill="none" stroke="orange" stroke-width="0.5">
           <path  class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
       <path   class="right-shade" d="M10 0l-5 3v5l5 -3"></path>
     </g>
    
         <use x="5" y="8" xlink:href="#hex"></use>
     <use x="-5" y="8" xlink:href="#hex"></use>
      </pattern>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-hexs)"></rect>
  </svg>

Answer 2

Комментарий @Voprositel

На месте стыков видны явные артефакты несостыковки

Благодарю @Sevastopol за уточнение в комментарии, добавить закрывающий символ z Это уменьшает артефакты несостыковки линий за счет утолщения (две линии рядом)

<svg width="100%" height="100%" viewBox="0 0 1000 1000">
   
   <pattern id="pattern-hexs" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16"> 
         <g id="hex"  stroke="orange" stroke-width="0.5">
           <path  fill="none" class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
       <path fill="none"  class="right-shade" d="M10 0l-5 3v5l5 -3z"></path>
     </g>
    
         <use x="5" y="8" xlink:href="#hex"></use>
     <use x="-5" y="8" xlink:href="#hex"></use>
   
   </pattern>
      
    <circle cx="50%" cy="50%" r="50%" fill="url(#pattern-hexs)" stroke="crimson" />
</svg>

Но необходимо найти решение, чтобы эти две соседние линии наложились друг на друга.

Эти вертикальные линии находятся в соседних ячейках pattern поэтому решение будет уменьшить ширину паттерна, чтобы вертикальные линии наложились друг на друга, оставив в итоге ширину одной линии.

Было: <pattern id="pattern-hexs" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16">

Стало: <pattern id="pattern-hexs" x="0" y="124" patternUnits="userSpaceOnUse" width="124" height="200" viewBox="0 0 10 16">

<svg width="100%" height="100%" viewBox="0 0 1000 1000">
   
   <pattern id="pattern-hexs" x="0" y="124" patternUnits="userSpaceOnUse" width="124" height="200" viewBox="0 0 10 16"> 
         <g id="hex"  stroke="orange" stroke-width="0.5">
           <path  fill="none" class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
       <path fill="none"  class="right-shade" d="M10 0l-5 3v5l5 -3z"></path>
     </g>
    
         <use x="5" y="8" xlink:href="#hex"></use>
     <use x="-5" y="8" xlink:href="#hex"></use>
   
   </pattern>
      
    <circle cx="50%" cy="50%" r="50%" fill="url(#pattern-hexs)" stroke="crimson" />
</svg>

Вариант с закраской правой грани кубика

<svg width="100%" height="100%" viewBox="0 0 1000 1000">
   
   <pattern id="pattern-hexs" x="0" y="124" patternUnits="userSpaceOnUse" width="124" height="200" viewBox="0 0 10 16"> 
         <g id="hex"  stroke="grey"  stroke-width="0.25">
           <path  fill="none" class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
       <path fill="grey"  class="right-shade" d="M10 0l-5 3v5l5 -3z"></path>
     </g>
    
         <use x="5" y="8" xlink:href="#hex"></use>
     <use x="-5" y="8" xlink:href="#hex"></use>
   
   </pattern>
      
    <circle cx="50%" cy="50%" r="50%" fill="url(#pattern-hexs)" stroke="grey" />
</svg>

Вариант с закраской левой грани

<svg width="100%" height="100%" viewBox="0 0 1000 1000">
   
   <pattern id="pattern-hexs" x="0" y="124" patternUnits="userSpaceOnUse" width="124" height="200" viewBox="0 0 10 16"> 
         <g id="hex"  stroke="grey"  stroke-width="0.25">
           <path  fill="grey" class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
       <path fill="none"  class="right-shade" d="M10 0l-5 3v5l5 -3z"></path>
     </g>
    
         <use x="5" y="8" xlink:href="#hex"></use>
     <use x="-5" y="8" xlink:href="#hex"></use>
   
   </pattern>
      
    <circle cx="50%" cy="50%" r="50%" fill="url(#pattern-hexs)" stroke="grey" />
</svg>

БЛОГ НА HUSL

Создать паттерн из "кубов"

Ответы (2 шт):