Web Design – Animated

Thanks to modern browser technology and CSS, it’s possible to create smooth animations that can be used on websites. For example, animated SVG letters.

/ Style for the SVG paths of the first SVG / #first-svg path { fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawPathFirst 55s forwards; }

@keyframes drawPathFirst { to { stroke-dashoffset: 0; } }

/ Style for the SVG paths in the second SVG /
#second-svg path {
fill: none;
stroke: #000000;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 4px;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawPathSecond 55s forwards 20s;
}

@keyframes drawPathSecond { to { stroke-dashoffset: 0; } }