16Animating Light
II · Drawing with SVG
A repeating gradient slides along the strokes like current through wires.
Auto
Source
2 files<head>
<link rel="stylesheet" href="/base.css" />
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<svg id="svg" aria-hidden="true" viewBox="0 0 24 24" width="420" fill="none">
<defs>
<linearGradient
id="gradient"
x2="2"
gradientTransform="translate(-2.1 0)"
spreadMethod="repeat"
>
<stop offset="50%" stop-color="transparent" />
<stop offset="100%" stop-color="white" />
<animateTransform
attributeName="gradientTransform"
type="translate"
from="-2.1 0"
to="-0.1 0"
dur="1s"
/>
</linearGradient>
</defs>
<!-- background path -->
<g fill="none" stroke="var(--gray6)" stroke-linecap="round">
<path d="M 4 6 C 12 6 12 10 20 10" />
<path d="M 4 12 H 20" />
<path d="M 4 18 C 12 18 12 14 20 14" />
</g>
<!-- edit the code below -->
<g fill="none" stroke="url(#gradient)" stroke-linecap="round">
<path d="M 4 6 C 12 6 12 10 20 10" />
<path d="M 4 18 C 12 18 12 14 20 14" />
</g>
<rect
x="3.5"
y="11.5"
height="1"
width="17"
rx="0.5"
fill="url(#gradient)"
/>
</svg>
</body>