<h1 class="h1-svg"><svg version="1.1" id="a11y-svg" x="0px" y="0px" xml:space="preserve" role="img"
aria-label="Accessibility Statement" focusable="false">
<g id="a11y-svg-design"><text aria-hidden="true" class="svg-color">accessibility</text></g>
</svg></h1>
.svg-color {
stroke: #ff4b00;
}
#a11y-svg {
stroke-linecap: round;
padding: 0.25rem;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
-webkit-animation: dash 20s linear forwards;
animation: dash 30s linear forwards;
overflow: visible;
font-size: 100px;
height: 0;
margin: 10rem 0 5rem 2rem;
position: relative;
}
#a11y-svg-design {
cursor: pointer;
stroke-width: 2px;
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
fill: transparent;
}
to {
stroke-dashoffset: 0;
fill: #ff4b00;
}
}
@media (prefers-reduced-motion: reduce) {
#a11y-svg {
animation: none;
fill: #ff4b00;
}
}
This Pen doesn't use any external CSS resources.