Stroke-dasharray not being applied

Question

I am following a tutorial (a bit dated now) to create an SVG animation and got stuck with stroke-dasharray - I am defining it but not seeing any effect. I am using Codepen for this.

 .container { background-color: black; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; }.path-1 { stroke-dasharray: 4; }

 <div class="container"> <div class="animation-wrap"> <svg class="logo" width="324" height="47" viewBox="0 0 324 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M59.992 1.392L47.064 46H40.536L30.168 10.096L19.416 46L12.952 46.064L0.472 1.392H6.68L16.408 39.216L27.16 1.392H33.688L43.928 39.088L53.72 1.392H59.992Z" fill="white"/> <path class="path-1" d="M72.1895 6.128V21.04H88.4455V25.84H72.1895V41.2H90.3655V46H66.3655V1.328H90.3655V6.128H72.1895Z" fill="white"/> <path d="M122.666 46L112.042 27.76H105.002V46H99.178V1.392H113.578C116.949 1.392 119.786 1.968 122.09 3.12C124.437 4.272 126.186 5.82933 127.338 7.792C128.49 9.75467 129.066 11.9947 129.066 14.512C129.066 17.584 128.17 20.2933 126.378 22.64C124.629 24.9867 121.983 26.544 118.442 27.312L129.642 46H122.666ZM105.002 23.088H113.578C116.735 23.088 119.103 22.32 120.682 20.784C122.261 19.2053 123.05 17.1147 123.05 14.512C123.05 11.8667 122.261 9.81867 120.682 8.368C119.146 6.91733 116.778 6.192 113.578 6.192H105.002V23.088Z" fill="white"/> <path d="M158.34 46.448C154.201 46.448 150.425 45.488 147.012 43.568C143.598 41.6053 140.889 38.896 138.883 35.44C136.921 31.9413 135.939 28.016 135.939 23.664C135.939 19.312 136.921 15.408 138.883 11.952C140.889 8.45333 143.598 5.744 147.012 3.824C150.425 1.86133 154.201 0.879997 158.34 0.879997C162.521 0.879997 166.318 1.86133 169.732 3.824C173.145 5.744 175.833 8.432 177.796 11.888C179.758 15.344 180.74 19.2693 180.74 23.664C180.74 28.0587 179.758 31.984 177.796 35.44C175.833 38.896 173.145 41.6053 169.732 43.568C166.318 45.488 162.521 46.448 158.34 46.448ZM158.34 41.392C161.454 41.392 164.249 40.6667 166.724 39.216C169.241 37.7653 171.204 35.696 172.612 33.008C174.062 30.32 174.788 27.2053 174.788 23.664C174.788 20.08 174.062 16.9653 172.612 14.32C171.204 11.632 169.262 9.56267 166.788 8.112C164.313 6.66133 161.497 5.936 158.34 5.936C155.182 5.936 152.366 6.66133 149.891 8.112C147.417 9.56267 145.454 11.632 144.003 14.32C142.595 16.9653 141.891 20.08 141.891 23.664C141.891 27.2053 142.595 30.32 144.003 33.008C145.454 35.696 147.417 37.7653 149.891 39.216C152.409 40.6667 155.225 41.392 158.34 41.392Z" fill="white"/> <path d="M223.5 46H217.676L194.252 10.48V46H188.428V1.328H194.252L217.676 36.784V1.328H223.5V46Z" fill="white"/> <path d="M239.252 1.392V46H233.428V1.392H239.252Z" fill="white"/> <path d="M273.37 46L255.002 25.648V46H249.178V1.392H255.002V22.064L273.434 1.392H280.794L260.57 23.728L280.986 46H273.37Z" fill="white"/> <path d="M313.858 36.08H294.402L290.818 46H284.675L300.803 1.648H307.522L323.587 46H317.443L313.858 36.08ZM312.194 31.344L304.131 8.816L296.066 31.344H312.194Z" fill="white"/> </svg> </div> </div>

What I tried:

• applying pixel value to stroke-dasharray
• adding a stroke attribute against the tutorial (that did something but not what I want, ie dashed text)
• checked that I am applying it to the, which seemed to resolve someone else's post on Stack Overflow
• changed fill value to #fff in case the fill requires a hex value

Answer 1

You need to set a stroke in order for stroke-dasharray to have an effect. stroke="red" for instance.

As the name suggests, it only applies to strokes, it has no effect on fill.

 .container { background-color: black; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; }.path-1 { stroke-dasharray: 4; stroke: red; }

 <div class="container"> <div class="animation-wrap"> <svg class="logo" width="324" height="47" viewBox="0 0 324 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M59.992 1.392L47.064 46H40.536L30.168 10.096L19.416 46L12.952 46.064L0.472 1.392H6.68L16.408 39.216L27.16 1.392H33.688L43.928 39.088L53.72 1.392H59.992Z" fill="white"/> <path class="path-1" d="M72.1895 6.128V21.04H88.4455V25.84H72.1895V41.2H90.3655V46H66.3655V1.328H90.3655V6.128H72.1895Z" fill="white"/> <path d="M122.666 46L112.042 27.76H105.002V46H99.178V1.392H113.578C116.949 1.392 119.786 1.968 122.09 3.12C124.437 4.272 126.186 5.82933 127.338 7.792C128.49 9.75467 129.066 11.9947 129.066 14.512C129.066 17.584 128.17 20.2933 126.378 22.64C124.629 24.9867 121.983 26.544 118.442 27.312L129.642 46H122.666ZM105.002 23.088H113.578C116.735 23.088 119.103 22.32 120.682 20.784C122.261 19.2053 123.05 17.1147 123.05 14.512C123.05 11.8667 122.261 9.81867 120.682 8.368C119.146 6.91733 116.778 6.192 113.578 6.192H105.002V23.088Z" fill="white"/> <path d="M158.34 46.448C154.201 46.448 150.425 45.488 147.012 43.568C143.598 41.6053 140.889 38.896 138.883 35.44C136.921 31.9413 135.939 28.016 135.939 23.664C135.939 19.312 136.921 15.408 138.883 11.952C140.889 8.45333 143.598 5.744 147.012 3.824C150.425 1.86133 154.201 0.879997 158.34 0.879997C162.521 0.879997 166.318 1.86133 169.732 3.824C173.145 5.744 175.833 8.432 177.796 11.888C179.758 15.344 180.74 19.2693 180.74 23.664C180.74 28.0587 179.758 31.984 177.796 35.44C175.833 38.896 173.145 41.6053 169.732 43.568C166.318 45.488 162.521 46.448 158.34 46.448ZM158.34 41.392C161.454 41.392 164.249 40.6667 166.724 39.216C169.241 37.7653 171.204 35.696 172.612 33.008C174.062 30.32 174.788 27.2053 174.788 23.664C174.788 20.08 174.062 16.9653 172.612 14.32C171.204 11.632 169.262 9.56267 166.788 8.112C164.313 6.66133 161.497 5.936 158.34 5.936C155.182 5.936 152.366 6.66133 149.891 8.112C147.417 9.56267 145.454 11.632 144.003 14.32C142.595 16.9653 141.891 20.08 141.891 23.664C141.891 27.2053 142.595 30.32 144.003 33.008C145.454 35.696 147.417 37.7653 149.891 39.216C152.409 40.6667 155.225 41.392 158.34 41.392Z" fill="white"/> <path d="M223.5 46H217.676L194.252 10.48V46H188.428V1.328H194.252L217.676 36.784V1.328H223.5V46Z" fill="white"/> <path d="M239.252 1.392V46H233.428V1.392H239.252Z" fill="white"/> <path d="M273.37 46L255.002 25.648V46H249.178V1.392H255.002V22.064L273.434 1.392H280.794L260.57 23.728L280.986 46H273.37Z" fill="white"/> <path d="M313.858 36.08H294.402L290.818 46H284.675L300.803 1.648H307.522L323.587 46H317.443L313.858 36.08ZM312.194 31.344L304.131 8.816L296.066 31.344H312.194Z" fill="white"/> </svg> </div> </div>