How to draw SVG curved using one path?
What I want is in the following image -
I have 3 relative questions regarding this
1. Draw the entire canvas with single path
.
2.If we can only draw the whole using more than one path, would it be convenient to animate them?
3. In both cases, someone can be kind enough to lead the right way with the sample.?
This is where I have gotten to so far ... as you can see, I am not an expert on SVG
and of course you can use a circle for a big point. Thank you in advance.
svg {
width: 100%;
}
.straightLine {
height: 3000px;
position: relative;
}
.st0 {
fill: none;
stroke-dashoffset: 3px;
stroke: #000000;
stroke-width: 5;
stroke-miterlimit: 10;
}
<div class="straightLine">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 1000" style="enable-background:new 0 0 1280 800;" xml:space="preserve">
<g class="all">
<path id="line1" class="st0" stroke-dasharray="10,9" d="M 35 -17 C 0 190 50 83 600 109 "/>
<path id="line1" class="st0" stroke-dasharray="10,9" d="M 600 109 c 64.9 0 90.4 40.5 90.4 90.4"/>
</g>
</svg>
</div>
source to share
Use something like:
<path d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" />
As shown in the documentation , paths can contain an arbitrary number of components.
As a summary:
M/m Move current position L/l Draw a line H/h Draw a horizontal line V/v Draw a vertical line C/c Draw a cubic Bezier Q/q Draw a quadratic Bezier A/a Draw a circular/elliptal arc Z/z Close path
In general, uppercase instructions indicate absolute coordinates, and lowercase instructions indicate relative coordinates.
source to share