templates/svg/hexagon.html.twig line 1

Open in your IDE?
  1. {# <svg width="320" height="370" viewBox="0 0 320 370" fill="none" xmlns="http://www.w3.org/2000/svg">
  2. <g clip-path="url(#clip0_6196_1028)">
  3. <path class="hex-two" d="M0.163333 92.6523L0 92.5592V185.165L80 231.469V139.053V138.86V46.4443L0.163333 92.6523Z" fill="#4C83AC"/>
  4. <path class="hex-two" d="M159.837 277.487L80 231.279V323.888L80.1633 323.792L160 370V277.394L159.837 277.487Z" fill="#4C83AC"/>
  5. <path class="hex-three" d="M79.8367 231.373L0 185.165V277.774L0.163333 277.678L80 323.889V231.28L79.8367 231.373Z" fill="#7FA7C6"/>
  6. <path class="hex-two" d="M319.837 92.6523L240 46.4443V139.053L240.163 138.957L320 185.165V92.5592L319.837 92.6523Z" fill="#4C83AC"/>
  7. <path class="hex-three" d="M240 46.1647L160.243 0L160.073 0.183009L80.0234 46.401L79.9268 139.01L159.977 92.7887L160.243 92.3261L160 92.7487L240 139.053V46.4442V46.1647Z" fill="#7FA7C6"/>
  8. <path class="hex-five" d="M320 185.165L240 138.86V231.469L320 185.165Z" fill="#00121F"/>
  9. <path class="hex-four" d="M160 92.5586L80 138.86L160 185.164L240 231.469V138.86L160 92.5586Z" fill="#001C33"/>
  10. <path class="hex-three" d="M240 231.279L320 184.975V277.584L240 231.279Z" fill="#7FA7C6"/>
  11. <path class="hex-one" d="M240 231.28L160 184.975L159.837 185.072L80 138.86V231.469L80.1633 231.373L160 277.584L240 231.28Z" fill="#D8E4F0"/>
  12. <path class="hex-three" d="M320 277.584L240 231.279L160.163 277.487L160 277.394V370L239.837 323.792L240 323.888L320 277.584Z" fill="#7FA7C6"/>
  13. </g>
  14. </svg> #}
  16. {# <svg width="907" height="1049" viewBox="0 0 907 1049" fill="none" xmlns="http://www.w3.org/2000/svg">
  17. <path
  18. id="animated-path"
  19. d="M907 622.717V424.303L830.051 388.297V573.456L76.8982 927.473V842.054L753.153 524.195V352.341L76.8982 35.9553L0 0V255.546L477.882 479.099L568.822 436.339L76.8982 206.235V121.019L676.254 401.399V474.985L0 792.793V1049L76.8982 1012.89L907 622.717Z"
  20. stroke="#D8C772"
  21. fill="none"
  22. stroke-width="2"
  23. />
  24. </svg> #}
  26. <svg width="940" height="1050" viewBox="0 0 940 1050" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  27. <defs>
  28. <mask id="inverse-mask">
  29. <!-- Full white rectangle shows everything -->
  30. <rect width="100%" height="100%" fill="white" />
  32. <!-- These black shapes will hide parts of the stroke -->
  33. <rect x="477.093" y="480.22" width="103.642" height="55.2925" transform="rotate(-25.1917 477.093 480.22)" fill="black"/>
  34. <rect x="846.078" y="334.912" width="103.642" height="55.2925" transform="rotate(25.1562 846.078 334.912)" fill="black"/>
  35. </mask>
  36. </defs>
  38. <path
  39. d="M553 472L39 231V61L715 377V500L39 817.5L39.5 988.5L869 599C869 599 869 452.351 869 388.5"
  40. stroke="#D8C772"
  41. stroke-width="77"
  42. mask="url(#inverse-mask)" />
  43. </svg>