1👍
✅
I’ve just checked the CodePen linked to the website and it seems like there is a css property stroke-width to modify the width/thickness of the stroke.
CSS
path {
stroke-width: 20;
}
Code from article’s example:
body{
display: flex;
justify-content: center;
}
svg {
height: 90vh;
width: 100vw;
background-color: PaleGreen;
padding: 5vh;
}
path {
stroke: white;
stroke-width: 20;
}
.v1 {
stroke-dasharray: 100;
stroke-dashoffset: 200;
animation: draw 1s infinite;
}
.v2 {
stroke-dasharray: 10;
stroke-dashoffset: 200;
animation: draw 2s alternate infinite;
}
.v3 {
stroke-dasharray: 1200 150;
stroke-dashoffset: 2700;
animation: draw 4s linear infinite;
}
@keyframes draw {
to {
stroke-dashoffset: 0
}
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="184.64 83.41 389.16 433.07">
<defs>
<path d="M200.05 429.61c26.29 30.73 55.8 52.8 88.53 66.21a265.15 265.15 0 0 0 55.9 15.84 127.39 127.39 0 0 0 91.74-19.28c21.76-14.38 36.06-29.03 42.92-43.96 18.8-40.95 16.55-89.29 10.21-119.89-6.34-30.61-8.47-85.69-20.16-119.84-7.78-22.77-24.58-34.58-50.4-35.45l11.34-69.28a1.2 1.2 0 0 1 1.43-.99l20.12 4a6.8 6.8 0 0 1 3.57 1.96l20.58 21.58a25.43 25.43 0 0 1 6.7 21.55l-1.31 8.19a34.66 34.66 0 0 0 4.98 24.09l47.79 75.12a23.65 23.65 0 0 1 2.98 18.47l-4.44 17.66c20.46-13.28 32.54-29.01 36.25-47.18 3.01-14.74 2.67-52.06-1.03-111.96a46.34 46.34 0 0 0-24.68-38.16l-23.01-12.12a15.34 15.34 0 0 0-13.66-.3l-42.72 20.1-33.08-7.96a.35.35 0 0 1-.26-.34v-1.01a3.18 3.18 0 0 0-2.98-3.17l-8.43-.53a4.58 4.58 0 0 0-4.84 5.03l3.84 37.76a32.76 32.76 0 0 1-2.6 16.44l-6.66 15.17 6.33 7.79c13.17 2.89 21.9 9.75 26.2 20.56 6.46 16.23 1.08 54.58 1.94 72.35 1.79 37.1-1.78 16.01 3.37 60.47 5.15 44.45-12.16 85.67-31.51 110.6-19.34 24.92-49.78 50.64-75.86 54.01-40.13 5.19-66.8-13.56-80-56.26-29.35 7.44-49.72 3.08-61.13-13.09-17.1-24.26-18.66-74.4 9.35-125.9 28.01-51.5 96.91-70.78 102.69-80.1 5.77-9.33 20.22-32.88 40.91-46.97 20.68-14.09 38.51-13.74 46.54-9.4 5.35 2.9 10.46 7.47 15.32 13.73l-65.5 124.46c-8.71 13.78-14.51 25.51-17.42 35.18-4.35 14.5-5.36 21.73 0 22.83 5.36 1.09 9.29-8.43 11.21-13.39 1.91-4.96 1.91-29.23-1.97-30.08-3.89-.84-15.5-.59-26.85 6.64-11.34 7.22-12.04 18.67-10.23 23.44 1.82 4.78 10.77-.82 17.94-9.44 4.78-5.75 8.08-11.73 9.9-17.94" id="a"/>
</defs>
<use xlink:href="#a" fill-opacity="0" stroke="#000" class="v1"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="184.64 83.41 389.16 433.07">
<use xlink:href="#a" fill-opacity="0" stroke="#000" class="v2"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="184.64 83.41 389.16 433.07">
<use xlink:href="#a" fill-opacity="0" stroke="#000" class="v3"/>
</svg>3👍
Besides the stroke-width (used to change the stroke width) there are other problems with your code. You are using stroke-dasharray: 100; and stroke-dashoffset: 100; but this won’t do since every letter have a different path length. In the next example I’ve putted the total length of each path in a css variable to be used by the animation.
Also your paths are drawn backwards: If you need your animation to run from right to left you need to animate the path from stroke-dashoffset: calc(var(--len) * -1); to 0.
I hope it helps.
svg {
height: 100vh;
width: 100vw;
background-color: #ebedf5;
}
path {
stroke-dasharray: var(--len);
stroke-dashoffset: calc(var(--len) * -1);
animation: draw 5s forwards;
background-color: white;
fill:none;
stroke:black;
stroke-width:3px;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}<div id="header">
<div id="content">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="100 385 500 100">
<path d="M189.37 447.93l-8.06-17.6-18.94-41.4-17.9 41.76-9.1 21.24" id="a" style="--len:133.43"/>
<path d="M259.91 434.47l-.15 7.99-12.14 7.78-26-.48-13.85-8.26-5.63-19.61 12.49-26.27 24.08-4.55 18.82 10.35" id="b" style="--len:160.01"/>
<path d="M332.37 436.93l-20 15-20-4-9-11-5-13 5-25 13-10H320l12.37 10" id="c" style="--len:154.97"/>
<path d="M402.37 451.93h-47v-63h43" id="d" style="--len:153"/>
<path d="M398.37 418.43h-43" id="e" style="--len:43"/>
<path d="M470.46 388.93v61h-7.15l-42.94-61v61" id="f" style="--len:203.75"/>
<path d="M538.17 388.93h-53 25v63" id="g" style="--len:141"/>
<path d="M181.54 428.33h-38.46" id="h" style="--len:38.46"/>
</svg>
</div>
</div>- [Django]-How to get data from external API to Django Rest Framework
- [Django]-Django settings based on IP or hostname
1👍
Since any font in SVG becomes a graphic object, rather, each of its characters.
Therefore, you can animate each character’s drawing without converting it to path
- animation CSS
svg {
height: 100vh;
width: 100vw;
background-color: #ebedf5;
}
.txt1 {
font-size:60px;
fill:none;
stroke:black;
stroke-dashoffset:400;
stroke-dasharray:400;
animation: an_text 10s forwards;
}
@keyframes an_text {
to {
stroke-dashoffset: 0
}
}<div id="header">
<div id="content">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 100">
<text class="txt1" dy="50" shape-rendering="crispEdges">Account </text>
</svg>
</div>
</div>- Or animation SMIL
svg {
height: 100vh;
width: 100vw;
background-color: #ebedf5;
}
.txt1 {
font-size:60px;
fill:none;
stroke:#474747;
stroke-dashoffset:400;
stroke-dasharray:400;
stroke-width:1px;
}<div id="header">
<div id="content">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 100">
<text class="txt1" dy="50" shape-rendering="crispEdges">ACCENT
<animate
dur="8s"
repeatCount="1"
attributeName="stroke-dashoffset"
values="400;0;400"
repeatCount="1" />
</text>
</svg>
</div>
</div>- Another animation example
The textPath command is used.
svg {
height: 100vh;
width: 100vw;
background-color: #ebedf5;
}
.txt1 {
font-size:80px;
fill:none;
stroke:black;
shape-rendering:crispEdges;
}<div id="header">
<div id="content">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="100 385 500 100">
<defs>
<path id="animatedLine" >
<animate attributeName="d" from="m200,335 h0" to="m200,335 h400" dur="3s" repeatCount="indefinite"/>
</path>
</defs>
<text class="txt1" dy="100">
<textPath xlink:href="#animatedLine">
ACCENT
</textPath>
</text>
</svg>
</div>
</div>- [Django]-Django: Casting Abstract Models
- [Django]-Storing large JSON data in Postgres is infeasible, so what are the alternatives?
- [Django]-Django Registration Redux: how to change the unique identifier from username to email and use email as login
- [Django]-Format for DateTimeField
- [Django]-Why are my django model fields not working?
- [Django]-Django messages being displayed twice
- [Django]-Testing Django view requiring user authentication with Factory Boy
Source:stackexchange.com