Javascript Code Dump By Vatsal Patel

ID : 1 & Title : protector.svg

ID : 2 & Title : Polygon Generator, polygon SVG Maker

polygonSVGMaker(document.getElementById("answer"));

function PolygonGenrator(points_arr) {
    let Triangle = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
    let points = "";
    for (let i = 0; i < points_arr.length; i++) {
        points += points_arr[i].x + "," + points_arr[i].y + " ";
    }
    Triangle.setAttribute("points", points);
    Triangle.setAttribute("style", "fill:white;stroke:black;stroke-width:3");
    return Triangle;
 }

ID : 3 & Title : SVG Dimension Text At Angle A1ID : 4 & Title : SVG Text At Point,..ID : 5 & Title : SVG Arc Between To angleID : 6 & Title : Find Angle between three point and Degree notation,.ID : 7 & Title : svg arrow maker functionID : 8 & Title : Draw Arrow with Notation

function DrawArrowNotation(p_arr){// [{},{}],viewBox="0 0 5000 5000"
let str=`<defs><linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#9c27b0" />
          <stop offset="40%" stop-color="#ff5722" />
          <stop offset="100%" stop-color="#ffc107" />
        </linearGradient></defs>`;

for(let i=0; i<p_arr.length;i++){
let x1= p_arr[i].x1;
let x2= p_arr[i].x2;
let y1= p_arr[i].y1;
let y2= p_arr[i].y2;
let T= p_arr[i].T;

str += `<path d="M${x2},${y2} L${x1},${y1}"
          style="stroke:black; stroke-width: 20px; fill: none;
                 marker-end: url(#arrow);" />`;

str += `  <circle stroke="black" stroke-width="15" fill=url("#MyGradient") cx="${x2}" cy="${y2}" r="150" width="300" height="300"
    >${T}</circle>`;
    str += `  <foreignObject fill="red" x="${x2-150}" y="${y2-150}" width="300" height="300"
     style="background-image: linear-gradient( 
110deg
 , #9c27b0 0%, #ff5722 48%, #ffc107 100%);
    cursor: pointer;
    line-height: 262px;
    font-size: 200px;
    color: white;
    border-radius: 50%;
    border: 15px solid black;
    font-weight: bolder;
    box-shadow: 0px 0px 80px black;">${T}</foreignObject>`;
}
return str;
// return arrow;

}

ID : 9 & Title : svgtobase64ID : 10 & Title : Svg Path rotate,..ID : 11 & Title : Svg VivewBox Overflow hidden,..ID : 12 & Title : SVG Drag elements, BoilerPlate,..

/* for drag svg Elements */
function dragElement(elmnt,tgl) {
  //elmnt == on which you want to add listener
  //tgl==true,remove Listener
  const svg = GetEl("#svg");
  elmnt.onmousedown = dragMouseDown;
  elmnt.ontouchstart = touchDown;
tgl && (elmnt.onmousedown = null, elmnt.ontouchstart = null);

function touchDown(e) {
    mousedown = true;
    e.preventDefault();
    document.ontouchend = closeMoveElemnt;
    document.ontouchmove = elementMove;
  }

function elementMove(e) {
    sliderMove(e.touches[0]);
  }

function closeMoveElemnt(e) {
    mousedown = false;
    document.ontouchend = null;
    document.ontouchmove = null;
  }

function dragMouseDown(e) {
    mousedown = true;
    // console.log(e)
    e = e || window.event;
    e.preventDefault();
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

function elementDrag(e) {
    // console.log(e)
    e = e || window.event;
    e.preventDefault();
    sliderMove(e);
  }

function closeDragElement() {
    mousedown = false;
    document.onmouseup = null;
    document.onmousemove = null;
  }

function getMousePosition(evt) {
    var CTM = svg.getScreenCTM();
    return {
      x: (evt.clientX - CTM.e) / CTM.a,
      y: (evt.clientY - CTM.f) / CTM.d
    };
  }

function sliderMove(e) {   
    let el1 = GetEl("#FocusPointLeft");
    el1.setAttribute("x", getMousePosition(e).x);
  }

}

ID : 13 & Title : points to bezier curve

let p_obj ={
    "PointsX": [905,878,712,690,583,522],
    "PointsY": [173,120,115,219,269.6,316.5]
}
wireMAker(p_obj);
function wireMAker(d) {

function f(d, e, f, g, h, j, k, l,i) {
		return "M " + d + " " + e + " C " + f + " " + g + " " + h + " " + j + " " + k + " " + l
	if(i>0){
		return " C " + f + " " + g + " " + h + " " + j + " " + k + " " + l
	}
	}

function g(d) {
		for (p1 = [], p2 = [], n = d.length - 1, a = [], b = [], c = [], r = [], a[0] = 0, b[0] = 2, c[0] = 1, r[0] = d[0] + 2 * d[1], i = 1; i < n - 1; i++) a[i] = 1, b[i] = 4, c[i] = 1, r[i] = 4 * d[i] + 2 * d[i + 1];
		for (a[n - 1] = 2, b[n - 1] = 7, c[n - 1] = 0, r[n - 1] = 8 * d[n - 1] + d[n], i = 1; i < n; i++) m = a[i] / b[i - 1], b[i] -= m * c[i - 1], r[i] -= m * r[i - 1];
		for (p1[n - 1] = r[n - 1] / b[n - 1], i = n - 2; 0 <= i; --i) p1[i] = (r[i] - c[i] * p1[i + 1]) / b[i];
		for (i = 0; i < n - 1; i++) p2[i] = 2 * d[i + 1] - p1[i + 1];
		return p2[n - 1] = .5 * (d[n] + p1[n - 1]), {
			p1: p1,
			p2: p2
		}
	}
	let h = d.PointsX.length,
		j = [...d.PointsX],
		k = [...d.PointsY];
	let l = j,
		o = k,
		p = g(l),
		q = g(o),
		s = "<path  stroke=\"blue\" stroke-width=\""+5+"\" fill=\"none\" d=\"";
	for (i = 0; i < l.length - 1; i++) s += " " + f(l[i], o[i], p.p1[i], q.p1[i], p.p2[i], q.p2[i], l[i + 1], o[i + 1],i);
	return s += "\" />", s
}

ID : 14 & Title : Zoom Svg Part, Use and clip,...ID : 15 & Title : transform rotate