";
//dark mode svg
$svg_str = $svg_str . "";
$svg_str = $svg_str . "";
$svg_str = $svg_str . "";
$svg_str = $svg_str . "";
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
//An uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates
//A xradius and y radius A 20radius 20radius x-end-stroke, y-endstrike
//needs a move command since x y is final destination
//move 0,50 draw arc finish 20,50, so radius is half of 20-0 = 20/2=10
//0 rotation = up and down
//d='M 0 50 A 10 10 0 0 1 20 50'
//https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
//only way to do half arcs A x radius y radius A rx ry x-axis-rotation large-arc-flag sweep-flag x y
//https://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
//Move to center 80, 80, 20 radius 40 diamter
//quarter circles
//0 -90
$svg_str = $svg_str . "";
//move x+radius to leftr radius up radius
$svg_str = $svg_str . "";
//90 to 180 move up radius, to , left radius down radius
$svg_str = $svg_str . "";
//180 to 270
$svg_str = $svg_str . "";
//270 to 360 arc, move down radius, to, right radius up radius
$svg_str = $svg_str . "";
//half circles center 80, radius 50 80
//RIGHT half circle 270 to 90, M down radius
$svg_str = $svg_str . "";
//LEFT half circle 90 to 270, m up radius, relative go down twice radius
$svg_str = $svg_str . "";
//UP half circle 0 to 180, m right radius, move left twice radius
$svg_str = $svg_str . "";
//DOWN half circle , 180 to 360, m left radius, movve right twice radius
$svg_str = $svg_str . "";
//F.6.4 Conversion from center to endpoint parameterization
$cx = 40; //center x
$cy = 90; //center y
$rx = 20; //radius size x axis
$ry = 20; //radius size y axis
$start_angle = 0;
$end_angle = -90;
$thetha1 = $start_angle * pi() / 180; //radians
$end_thetha = $end_angle * pi() / 180;
$delta_thetha = $end_thetha - $thetha1;
//φ is the angle from the x-axis of the current coordinate system to the x-axis of the ellipse.
$phi = 0 * pi() / 180;
//convert angles to radians
$x1 = $cx + cos($phi) * $rx * cos($thetha1)
- sin($phi) * $ry * sin($thetha1);
$y1 = $cy + sin($phi) * $rx * cos($thetha1)
+ cos($phi) * $ry * sin($thetha1);
$x2 = $cx + cos($phi) * $rx * cos($thetha1 + $delta_thetha)
- sin($phi) * $ry * sin($thetha1 + $delta_thetha);
$y2 = $cy + sin($phi) * $rx * cos($thetha1 + $delta_thetha)
+ cos($phi) * $ry * sin($thetha1 + $delta_thetha);
$large_arc_flag = 0;
if (($end_angle - $start_angle) > 180) {
$large_arc_flag = 1;
}
$svg_str = $svg_str . "";
$svg_str = $svg_str . "";
?>
View SVG Door Template
Homepage /
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
return d;
}