I have two SVG files, one of which contains an outline-like path, where each closed shape is represented as a single continuous path. I want to generate a new path that accurately follows the centerline of each shape and fills it accordingly. The desired result should match the red path shown in the reference image. Do you have any suggestions for achieving this automatically using software applications or by writing a custom program?
I have two SVG files, one of which contains an outline-like path, where each closed shape is represented as a single continuous path. I want to generate a new path that accurately follows the centerline of each shape and fills it accordingly. The desired result should match the red path shown in the reference image. Do you have any suggestions for achieving this automatically using software applications or by writing a custom program?
Share Improve this question edited Mar 20 at 9:01 Danny '365CSI' Engelman 21.4k2 gold badges46 silver badges63 bronze badges asked Mar 20 at 8:55 mohammad cyberaimohammad cyberai 11 Answer
Reset to default -1This, at least from my experience would be easier that you create the same svg with single line, not shape but single line, that way you can add stroke-dasharray and stroke-dashoffset directly the svg. But not fill, single line. It will require some work to have the expected result but none the less is possible. I would suggest either doing with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animate SVG with stroke width</title>
<style>
#line {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<path id="line" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" stroke-width="10"/>
</svg>
</body>
</html>
Due to being just one line, you can surely just create a svg line using open source tools or commercial. As the end option, would to change this part of the code, so that you check by testing weather or not the code image is more or less how you would want it. Keep in mind that svg are responsive.