I'm trying to draw 6 sticks starting from the centre of the circle with an angle (60 degrees)
What's in the picture is achieved by setting up coordinates manually. Would it be possible to use angle and length to draw these 6 sticks? If necessary, I'm willing to use a library.
<defs>
<marker id="markerCircle" markerwidth="13" markerheight="13" refx="5" refy="7" orient="auto">
<circle cx="7" cy="7" r="3" style="stroke: none; fill:#ef4b22;" />
</marker>
</defs>
<path d="M150,5 L150,55"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M25,60 L75,95"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M20,225 L68,200"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M275,60 L225,95"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M280,225 L220,200"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M150,300 L150,250"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more. Paths create complex shapes by combining multiple straight lines or curved lines. Complex shapes composed only of straight lines can be created as <polyline> s.
The <marker> element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path> , <line> , <polyline> or <polygon> element. Markers are attached to shapes using the marker-start , marker-mid , and marker-end properties.
The <line> element is an SVG basic shape used to create a line connecting two points.
Here's a demo I made for you.
The main function used is to find a point on a circle, as below:
function findPoint(cx, cy, rad, cornerGrad){
var cornerRad = cornerGrad * Math.PI / 180;
var nx = Math.cos(cornerRad)*rad + cx;
var ny = Math.sin(cornerRad)*rad + cy;
return { x: nx, y: ny };
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With