diff --git a/+page.svelte b/+page.svelte
new file mode 100644
index 000000000..9764877b4
--- /dev/null
+++ b/+page.svelte
@@ -0,0 +1,282 @@
+<script>
+  import { writable } from "svelte/store";
+
+  let color = "#FF0066";
+  let svgShape = "M150 0 L75 200 L225 200 Z";
+  const shapes = writable([]);
+
+  let dragState = {
+    isDragging: false,
+    isResizing: false,
+    startX: 0,
+    startY: 0,
+    shapeIndex: null,
+  };
+
+  function addShape() {
+    shapes.update((items) => [
+      ...items,
+      {
+        id: items.length,
+        path: svgShape,
+        color,
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      },
+    ]);
+  }
+
+  function downloadSVG() {
+    const svgContent = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+          ${$shapes.map((shape) => `<path d="${shape.path}" fill="${shape.color}" transform="translate(${shape.x},${shape.y}) scale(${shape.width / 100},${shape.height / 100})" />`).join("")}
+        </svg>
+      `;
+    const blob = new Blob([svgContent], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "shape.svg";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  function downloadPNG() {
+    const svg = document.querySelector(".shape-preview svg");
+    const svgData = new XMLSerializer().serializeToString(svg);
+    const canvas = document.createElement("canvas");
+    canvas.width = 500;
+    canvas.height = 500;
+    const ctx = canvas.getContext("2d");
+
+    const img = new Image();
+    img.src = "data:image/svg+xml;base64," + btoa(svgData);
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0);
+      canvas.toBlob((blob) => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "shape.png";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      });
+    };
+  }
+
+  function startDrag(event, index) {
+    dragState.isDragging = true;
+    dragState.startX = event.clientX;
+    dragState.startY = event.clientY;
+    dragState.shapeIndex = index;
+  }
+
+  function startResize(event, index) {
+    dragState.isResizing = true;
+    dragState.startX = event.clientX;
+    dragState.startY = event.clientY;
+    dragState.shapeIndex = index;
+  }
+
+  function onMouseMove(event) {
+    if (dragState.isDragging && dragState.shapeIndex !== null) {
+      const dx = event.clientX - dragState.startX;
+      const dy = event.clientY - dragState.startY;
+      shapes.update((items) => {
+        const updatedItems = [...items];
+        const shape = updatedItems[dragState.shapeIndex];
+        shape.x += dx;
+        shape.y += dy;
+        dragState.startX = event.clientX;
+        dragState.startY = event.clientY;
+        return updatedItems;
+      });
+    } else if (dragState.isResizing && dragState.shapeIndex !== null) {
+      const dx = event.clientX - dragState.startX;
+      const dy = event.clientY - dragState.startY;
+      shapes.update((items) => {
+        const updatedItems = [...items];
+        const shape = updatedItems[dragState.shapeIndex];
+        shape.width += dx;
+        shape.height += dy;
+        dragState.startX = event.clientX;
+        dragState.startY = event.clientY;
+        return updatedItems;
+      });
+    }
+  }
+
+  function onMouseUp() {
+    dragState.isDragging = false;
+    dragState.isResizing = false;
+    dragState.shapeIndex = null;
+  }
+
+  window.addEventListener("mousemove", onMouseMove);
+  window.addEventListener("mouseup", onMouseUp);
+
+  let showDropdown = false;
+
+  function toggleDropdown() {
+    showDropdown = !showDropdown;
+  }
+
+  function handleDownload(format) {
+    if (format === "svg") {
+      downloadSVG();
+    } else if (format === "png") {
+      downloadPNG();
+    }
+    showDropdown = false;
+  }
+</script>
+
+<div class="container">
+  <div class="sidebar">
+    <h2>SVG Shape Generator</h2>
+    <div class="toolbar">
+      <label>
+        Color:
+        <input type="color" bind:value={color} />
+      </label>
+      <label>
+        Shape:
+        <select bind:value={svgShape}>
+          <option value="M150 0 L75 200 L225 200 Z">Triangle</option>
+          <option
+            value="M100,100 C150,50 200,150 250,100 C300,50 350,150 400,100"
+            >Wave</option
+          >
+          <option
+            value="M150 0 L75 200 L225 200 Q150 300 75 400 Q225 500 150 600 L0 600 Z"
+            >Complex</option
+          >
+          <option value="M50,50 h150 v150 h-150 Z">Square</option>
+          <option value="M100,200 Q150,50 200,200 T300,200">Arc</option>
+        </select>
+      </label>
+      <button class="btn" on:click={addShape}>Add Shape</button>
+      <div class="dropdown">
+        <button class="btn" on:click={toggleDropdown}>Download</button>
+        <div class="dropdown-content" class:show={showDropdown}>
+          <button on:click={() => handleDownload("svg")}>Download as SVG</button
+          >
+          <button on:click={() => handleDownload("png")}>Download as PNG</button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="main">
+    <div class="shape-preview">
+      <svg width="100%" height="100%">
+        {#each $shapes as { id, path, color, x, y, width, height }, index}
+          <g
+            transform="translate({x}, {y})"
+            class="shape"
+            on:mousedown={(e) => startDrag(e, index)}
+          >
+            <path
+              d={path}
+              fill={color}
+              transform={`scale(${width / 100}, ${height / 100})`}
+            />
+            <rect
+              x={width - 10}
+              y={height - 10}
+              width="10"
+              height="10"
+              class="resize-handle"
+              on:mousedown={(e) => startResize(e, index)}
+            />
+          </g>
+        {/each}
+      </svg>
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    height: 100vh;
+    font-family: Arial, sans-serif;
+  }
+  .sidebar {
+    width: 250px;
+    background-color: #f4f4f4;
+    padding: 20px;
+  }
+  .main {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+  }
+  .toolbar {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .shape-preview {
+    border: 1px dashed #ccc;
+    width: 500px;
+    height: 500px;
+    position: relative;
+  }
+  .shape {
+    cursor: move;
+  }
+  .resize-handle {
+    width: 10px;
+    height: 10px;
+    background: #000;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: se-resize;
+  }
+  .btn {
+    background-color: green;
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    width: 200px;
+    height: 45px;
+  }
+  .dropdown {
+    position: relative;
+  }
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+  }
+  .dropdown-content button {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  .dropdown-content button:hover {
+    background-color: #f1f1f1;
+  }
+  .show {
+    display: block;
+  }
+</style>
diff --git a/Final Work/+page.svelte b/Final Work/+page.svelte
new file mode 100644
index 000000000..1f55d26b7
--- /dev/null
+++ b/Final Work/+page.svelte	
@@ -0,0 +1,475 @@
+<script>
+  import { writable } from 'svelte/store';
+
+  let color = '#FF0066';
+  let svgShape = 'M150 0 L75 200 L225 200 Z'; 
+  const shapes = writable([]);
+  let selectedShapeIndex = null;
+  let size = 100; 
+  let rotation = 0; 
+  let showDownloadOptions = false; 
+
+  let dragState = {
+    isDragging: false,
+    isResizing: false,
+    startX: 0,
+    startY: 0,
+    shapeIndex: null
+  };
+
+  function generateRandomPath(points) {
+    if (points.length < 2) return ''; 
+
+    let path = `M${points[0].x},${points[0].y} `;
+    for (let i = 1; i < points.length; i++) {
+      path += `L${points[i].x},${points[i].y} `;
+    }
+    path += 'Z'; 
+    return path;
+  }
+
+  function generateBlobPath() {
+    const numPoints = 8; 
+    const radius = 100; 
+    const variance = 40; 
+
+    const points = [];
+    for (let i = 0; i < numPoints; i++) {
+      const angle = (i / numPoints) * (2 * Math.PI);
+      const distance = radius + (Math.random() - 0.5) * variance;
+      const x = 250 + Math.cos(angle) * distance;
+      const y = 250 + Math.sin(angle) * distance;
+      points.push({ x, y });
+    }
+
+    return generateCatmullRomPath(points);
+  }
+
+  function generateCatmullRomPath(points) {
+    if (points.length < 2) return ''; 
+
+    const path = [];
+    path.push(`M${points[0].x},${points[0].y}`);
+
+    for (let i = 0; i < points.length; i++) {
+      const p0 = points[i];
+      const p1 = points[(i + 1) % points.length];
+      const p2 = points[(i + 2) % points.length];
+      const p3 = points[(i + 3) % points.length];
+
+      for (let t = 0; t <= 1; t += 0.1) {
+        const x = 0.5 * (
+          (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t * t * t +
+          (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t * t +
+          (-p0.x + p2.x) * t +
+          2 * p1.x
+        );
+
+        const y = 0.5 * (
+          (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t * t * t +
+          (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t * t +
+          (-p0.y + p2.y) * t +
+          2 * p1.y
+        );
+
+        path.push(`L${x},${y}`);
+      }
+    }
+
+    path.push('Z'); 
+    return path.join(' ');
+  }
+
+  function addShape() {
+    const shapeToAdd = svgShape === 'Blob' ? generateBlobPath() : svgShape;
+
+    shapes.update(items => [
+      ...items,
+      { id: items.length, path: shapeToAdd, color, x: 0, y: 0, width: size, height: size, rotation: 0 }
+    ]);
+  }
+
+  function deleteShape() {
+    shapes.update(items => items.slice(0, -1));
+  }
+
+  function onSizeChange(event) {
+    const newSize = Number(event.target.value);
+    if (selectedShapeIndex !== null) {
+      shapes.update(items => {
+        const updatedItems = [...items];
+        const shape = updatedItems[selectedShapeIndex];
+        shape.width = newSize;
+        shape.height = newSize;
+        return updatedItems;
+      });
+    }
+  }
+
+  function updateColorPreview(event) {
+    const previewElement = event.target.nextElementSibling;
+    previewElement.style.backgroundColor = event.target.value;
+  }
+
+  function triggerColorInput(event) {
+    const inputElement = event.target.previousElementSibling;
+    inputElement.click();
+  }
+
+  function downloadSVG() {
+    const svgContent = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+        ${$shapes.map(shape => `
+          <path d="${shape.path}" fill="${shape.color}" stroke="none" transform="translate(${shape.x},${shape.y}) scale(${shape.width / 100},${shape.height / 100})" />
+        `).join('')}
+      </svg>
+    `;
+    const blob = new Blob([svgContent], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'shape.svg';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  function downloadPNG() {
+    const svgElement = document.querySelector('.shape-preview svg');
+    const svgString = new XMLSerializer().serializeToString(svgElement);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    const img = new Image();
+    img.onload = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+      const png = canvas.toDataURL('image/png');
+
+      const a = document.createElement('a');
+      a.href = png;
+      a.download = 'shape.png';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
+  }
+
+  function startDrag(event, index) {
+    dragState.isDragging = true;
+    dragState.startX = event.clientX;
+    dragState.startY = event.clientY;
+    dragState.shapeIndex = index;
+    selectedShapeIndex = index;
+    size = $shapes[index].width; 
+  }
+
+  function startResize(event, index) {
+    dragState.isResizing = true;
+    dragState.startX = event.clientX;
+    dragState.startY = event.clientY;
+    dragState.shapeIndex = index;
+  }
+
+  function onMouseMove(event) {
+    if (dragState.isDragging && dragState.shapeIndex !== null) {
+      const dx = event.clientX - dragState.startX;
+      const dy = event.clientY - dragState.startY;
+      shapes.update(items => {
+        const updatedItems = [...items];
+        const shape = updatedItems[dragState.shapeIndex];
+        shape.x += dx;
+        shape.y += dy;
+        dragState.startX = event.clientX;
+        dragState.startY = event.clientY;
+        return updatedItems;
+      });
+    } else if (dragState.isResizing && dragState.shapeIndex !== null) {
+      const dx = event.clientX - dragState.startX;
+      const dy = event.clientY - dragState.startY;
+      shapes.update(items => {
+        const updatedItems = [...items];
+        const shape = updatedItems[dragState.shapeIndex];
+        shape.width += dx;
+        shape.height += dy;
+        dragState.startX = event.clientX;
+        dragState.startY = event.clientY;
+        return updatedItems;
+      });
+    }
+  }
+
+  function onMouseUp() {
+    dragState.isDragging = false;
+    dragState.isResizing = false;
+    dragState.shapeIndex = null;
+  }
+
+  function onRotationChange(event) {
+    const newRotation = Number(event.target.value);
+    if (selectedShapeIndex !== null) {
+      shapes.update(items => {
+        const updatedItems = [...items];
+        const shape = updatedItems[selectedShapeIndex];
+        shape.rotation = newRotation;
+        return updatedItems;
+      });
+    }
+  }
+
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('mouseup', onMouseUp);
+</script>
+
+<style>
+  body {
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+    background: linear-gradient(135deg, #ff7e5f, #feb47b);
+  }
+
+  .container {
+    display: flex;
+    height: 100vh;
+  }
+
+  .sidebar {
+    width: 300px;
+    background-color: #ffffff;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    border-radius: 10px;
+    margin: 20px;
+    overflow: hidden;
+  }
+
+  .main {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url('https://www.toptal.com/designers/subtlepatterns/uploads/memphis-mini.png');
+    background-size: cover;
+    padding: 20px;
+    border-radius: 10px;
+    margin: 20px;
+  }
+
+  .toolbar {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  h2 {
+    color: #333;
+    text-align: center;
+    font-size: 24px;
+  }
+
+  label {
+    display: flex;
+    flex-direction: column;
+    font-weight: bold;
+    color: #555;
+    margin-top: 10px;
+  }
+
+  .hidden-color-input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  input[type="color"],
+  select,
+  .btn {
+    margin-top: 5px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #fff;
+    transition: all 0.3s;
+  }
+
+  input[type="color"]:focus,
+  select:focus,
+  .btn:focus {
+    outline: none;
+    border-color: #888;
+  }
+
+  .btn {
+    cursor: pointer;
+    font-weight: bold;
+    color: #000;
+  }
+
+  .btn.add {
+    background-color: #5af17d; 
+  }
+
+  .btn.add:hover {
+    background-color: #28a745;
+    color: #fff; 
+  }
+
+  .btn.delete {
+    background-color: #f65868; 
+  }
+
+  .btn.delete:hover {
+    background-color: #dc3545;
+    color: #fff; 
+  }
+
+  .btn.download {
+    background-color: #7baafc;
+  }
+
+  .btn.download:hover {
+    background-color: #007bff; 
+    color: #fff; 
+  }
+
+  .resize-title {
+    font-size: 1em;
+    font-weight: bold;
+  }
+
+  .resize-toolbar {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .range-input {
+    width: 100%;
+  }
+
+  .shape-preview {
+    border: 1px dashed #ccc;
+    width: 500px;
+    height: 500px;
+    position: relative;
+    background-color: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+    margin-top: 20px;
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .shape {
+    cursor: move;
+    transition: transform 0.3s ease;
+  }
+
+  .resize-handle {
+    width: 10px;
+    height: 10px;
+    background: #000000;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: se-resize;
+    transition: background 0.3s;
+  }
+
+  .resize-handle:hover {
+    background: #007bff;
+  }
+
+  .logo {
+    width: 100px;
+    margin: 0 auto 20px;
+    display: block;
+  }
+
+  .header {
+    text-align: center;
+  }
+
+  .color-preview {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+    cursor: pointer;
+    margin-top: 5px;
+  }
+
+  .download-options {
+    display: flex;
+    gap: 5px;
+    margin-top: 5px;
+  }
+</style>
+
+<div class="container">
+  <div class="sidebar">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="Logo" class="logo">
+    <h2>SVG Shape Generator</h2>
+    <div class="toolbar">
+      <label>
+        Color:
+        <input type="color" bind:value={color} on:input={updateColorPreview} class="hidden-color-input" />
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div class="color-preview" style="background-color: {color};" on:click={triggerColorInput}></div>
+      </label>
+      <label>
+        Shape:
+        <select bind:value={svgShape}>
+          <option value="M150 0 L75 200 L225 200 Z">Triangle</option>
+          <option value="M100,100 C150,50 200,150 250,100 C300,50 350,150 400,100">Wave</option>
+          <option value="M50,50 h150 v150 h-150 Z">Square</option>
+          <option value="M250 100 A150 150 0 1 0 250 400 A150 150 0 1 0 250 100">Circle</option>
+          <option value="Blob">Blob</option>
+          <option value="M0,0 h100 v50 h-100 Z">Rectangle</option>
+          <option value="M100 30 L170 75 L170 145 L100 190 L30 145 L30 75 Z">Hexagon</option> 
+        </select>        
+      </label>
+      <label>
+        Rotation:
+        <input type="range" min="0" max="360" bind:value={rotation} class="range-input" on:input={onRotationChange} />
+        <span>{rotation}°</span>
+      </label>      
+      <label>
+        Resize Shape:
+        <input type="range" min="10" max="500" bind:value={size} class="range-input" on:input={onSizeChange} />
+      </label>
+      <button class="btn add" on:click={addShape}>Add Shape</button>
+      <button class="btn delete" on:click={deleteShape}>Delete Shape</button>
+      <button class="btn download" on:click={() => showDownloadOptions = !showDownloadOptions}>
+        {showDownloadOptions ? 'Close' : 'Download'}
+      </button>
+      {#if showDownloadOptions}
+        <div class="download-options">
+          <button class="btn download" on:click={downloadSVG}>SVG</button>
+          <button class="btn download" on:click={downloadPNG}>PNG</button>
+        </div>
+      {/if}
+    </div>
+  </div>
+  <div class="main">
+    <div class="shape-preview">
+      <svg>
+        {#each $shapes as { id, path, color, x, y, width, height, rotation }, index}
+        <g transform="translate({x},{y}) rotate({rotation})" class="shape" on:mousedown={(e) => startDrag(e, index)}>
+        <path d={path} fill={color} stroke="none" transform={`scale(${width / 100},${height / 100})`} />
+        <rect x={width - 10} y={height - 10} width="10" height="10" class="resize-handle" on:mousedown={(e) => startResize(e, index)} />
+        </g>
+        {/each}
+      </svg>
+    </div>
+  </div>
+</div>
diff --git a/Final Work/meta.json b/Final Work/meta.json
new file mode 100644
index 000000000..b991227fd
--- /dev/null
+++ b/Final Work/meta.json	
@@ -0,0 +1,31 @@
+{
+    "name": "SVG Shape Generator ",
+    "description":"The SVG Shape Generator is a user-friendly web application designed to create and customize SVG shapes. Users can select from various predefined shapes, adjust their colors, and manipulate them through dragging and resizing. The tool supports adding multiple shapes, allowing for complex designs. Once satisfied, users can download the final SVG file, making it an ideal solution for graphic designers and web developers looking to create scalable vector graphics efficiently. ",
+    "contributors": [{
+        "name": "Sanskar Srivastava",
+        "githubId": "dhawalcoder42"
+    }, {
+        "name": "Ayush Fating",
+        "githubId": "Ayush202201070127"
+    },
+    {
+        "name": "Sayali Jadhav",
+        "githubId": "sayali-jadhav21"
+    },
+    {
+        "name": "Chintaluri Sai Srinivas",
+        "githubId": "SaiSrinivas13"
+    },
+    {
+        "name": "Prachiti Gaikwad",
+        "githubId": "prachitig123"
+    },
+    {
+        "name": "Yash Borkar",
+        "githubId": "yash-borkar"
+    },
+    {
+        "name": "Shruti Haware",
+        "githubId": "shruti-haware"
+    }]
+}
\ No newline at end of file
diff --git a/meta.json b/meta.json
new file mode 100644
index 000000000..1634e823f
--- /dev/null
+++ b/meta.json
@@ -0,0 +1,23 @@
+{
+    "name": "SVG Shape Generator ",
+    "description":"The SVG Shape Generator is a user-friendly web application designed to create and customize SVG shapes. Users can select from various predefined shapes, adjust their colors, and manipulate them through dragging and resizing. The tool supports adding multiple shapes, allowing for complex designs. Once satisfied, users can download the final SVG file, making it an ideal solution for graphic designers and web developers looking to create scalable vector graphics efficiently. ",
+    "contributors": [{
+        "name": "Sanskar Srivastava",
+        "githubId": "dhawalcoder42"
+    }, {
+        "name": "Ayush Fating",
+        "githubId": "Ayush202201070127"
+    },
+    {
+        "name": "Sayali Jadhav",
+        "githubId": "sayali-jadhav21"
+    },
+    {
+        "name": "Chintaluri Sai Srinivas",
+        "githubId": "SaiSrinivas13"
+    },
+    {
+        "name": "Yash Borkar",
+        "githubId": "yash-borkar"
+    }]
+}
diff --git a/package.json b/package.json
index 24d9001e6..c637234af 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
 	},
 	"dependencies": {
 		"@faker-js/faker": "^8.4.1",
-		"@sveltejs/adapter-node": "^1.3.1",
 		"axios": "^1.7.2",
 		"cheerio": "^1.0.0-rc.12",
 		"cors": "^2.8.5",
@@ -35,6 +34,7 @@
 		"jspdf": "^2.5.1",
 		"pdf-lib": "^1.17.1",
 		"svelte-awesome-color-picker": "^3.1.0",
+		"svelte-svg": "^0.0.7",
 		"svelte-tags-input": "^6.0.0",
 		"tailwindcss": "^3.3.5",
 		"tesseract.js": "^5.0.2",
diff --git a/src/routes/(tools)/svg-shape-generator/+page.svelte b/src/routes/(tools)/svg-shape-generator/+page.svelte
index 55b5a5ecf..ea92cd8ed 100644
--- a/src/routes/(tools)/svg-shape-generator/+page.svelte
+++ b/src/routes/(tools)/svg-shape-generator/+page.svelte
@@ -1,11 +1,178 @@
 <script>
-
-</script>
-
-<div class="card gap-16 items-center mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 overflow-hidden rounded-lg">
-	<!-- Add tool here -->
-</div>
-
-<style>
-
-</style>
\ No newline at end of file
+    import { writable } from 'svelte/store';
+  
+    let color = '#FF0066';
+    let svgShape = 'M150 0 L75 200 L225 200 Z'; 
+    const shapes = writable([]);
+  
+    let dragState = {
+      isDragging: false,
+      isResizing: false,
+      startX: 0,
+      startY: 0,
+      shapeIndex: null
+    };
+  
+    function addShape() {
+      shapes.update(items => [
+        ...items,
+        { id: items.length, path: svgShape, color, x: 0, y: 0, width: 100, height: 100 }
+      ]);
+    }
+  
+    function downloadSVG() {
+      const svgContent = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+          ${$shapes.map(shape => `<path d="${shape.path}" fill="${shape.color}" transform="translate(${shape.x},${shape.y}) scale(${shape.width / 100},${shape.height / 100})" />`).join('')}
+        </svg>
+      `;
+      const blob = new Blob([svgContent], { type: 'image/svg+xml' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'shape.svg';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+  
+    function startDrag(event, index) {
+      dragState.isDragging = true;
+      dragState.startX = event.clientX;
+      dragState.startY = event.clientY;
+      dragState.shapeIndex = index;
+    }
+  
+    function startResize(event, index) {
+      dragState.isResizing = true;
+      dragState.startX = event.clientX;
+      dragState.startY = event.clientY;
+      dragState.shapeIndex = index;
+    }
+  
+    function onMouseMove(event) {
+      if (dragState.isDragging && dragState.shapeIndex !== null) {
+        const dx = event.clientX - dragState.startX;
+        const dy = event.clientY - dragState.startY;
+        shapes.update(items => {
+          const updatedItems = [...items];
+          const shape = updatedItems[dragState.shapeIndex];
+          shape.x += dx;
+          shape.y += dy;
+          dragState.startX = event.clientX;
+          dragState.startY = event.clientY;
+          return updatedItems;
+        });
+      } else if (dragState.isResizing && dragState.shapeIndex !== null) {
+        const dx = event.clientX - dragState.startX;
+        const dy = event.clientY - dragState.startY;
+        shapes.update(items => {
+          const updatedItems = [...items];
+          const shape = updatedItems[dragState.shapeIndex];
+          shape.width += dx;
+          shape.height += dy;
+          dragState.startX = event.clientX;
+          dragState.startY = event.clientY;
+          return updatedItems;
+        });
+      }
+    }
+  
+    function onMouseUp() {
+      dragState.isDragging = false;
+      dragState.isResizing = false;
+      dragState.shapeIndex = null;
+    }
+  
+  
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  </script>
+  
+  <style>
+    .container {
+      display: flex;
+      height: 100vh;
+      font-family: Arial, sans-serif;
+    }
+    .sidebar {
+      width: 250px;
+      background-color: #f4f4f4;
+      padding: 20px;
+    }
+    .main {
+      flex-grow: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: white;
+    }
+    .toolbar {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .shape-preview {
+      border: 1px dashed #ccc;
+      width: 500px;
+      height: 500px;
+      position: relative;
+    }
+    .shape {
+      cursor: move;
+    }
+    .resize-handle {
+      width: 10px;
+      height: 10px;
+      background: #000;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      cursor: se-resize;
+    }
+    .btn {
+      background-color: green;
+      color: white;
+      border: none;
+      padding: 10px;
+      cursor: pointer;
+    }
+  </style>
+  
+  <div class="container">
+    <div class="sidebar">
+      <h2>SVG Shape Generator</h2>
+      <div class="toolbar">
+        <label>
+          Color:
+          <input type="color" bind:value={color} />
+        </label>
+        <label>
+          Shape:
+          <select bind:value={svgShape}>
+            <option value="M150 0 L75 200 L225 200 Z">Triangle</option>
+            <option value="M100,100 C150,50 200,150 250,100 C300,50 350,150 400,100">Wave</option>
+            <option value="M150 0 L75 200 L225 200 Q150 300 75 400 Q225 500 150 600 L0 600 Z">Complex</option>
+            <option value="M50,50 h150 v150 h-150 Z">Square</option>
+            <option value="M100,200 Q150,50 200,200 T300,200">Arc</option>
+          </select>
+        </label>
+        <button class="btn" on:click={addShape}>Add Shape</button>
+        <button class="btn" on:click={downloadSVG}>Download</button>
+      </div>
+    </div>
+    <div class="main">
+      <div class="shape-preview">
+        <svg width="100%" height="100%">
+          {#each $shapes as { id, path, color, x, y, width, height }, index}
+            <g transform="translate({x}, {y})" class="shape" on:mousedown={(e) => startDrag(e, index)}>
+              <path d={path} fill={color} transform={`scale(${width / 100}, ${height / 100})`} />
+              <rect x={width - 10} y={height - 10} width="10" height="10" class="resize-handle" on:mousedown={(e) => startResize(e, index)} />
+            </g>
+          {/each}
+        </svg>
+      </div>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/src/routes/(tools)/svg-shape-generator/meta.json b/src/routes/(tools)/svg-shape-generator/meta.json
index cea5af16b..74085fc3b 100644
--- a/src/routes/(tools)/svg-shape-generator/meta.json
+++ b/src/routes/(tools)/svg-shape-generator/meta.json
@@ -1,9 +1,9 @@
 {
     "name": "SVG Shape Generator ",
-    "description":"",
+    "description":"The SVG Shape Generator is a user-friendly web application designed to create and customize SVG shapes. Users can select from various predefined shapes, adjust their colors, and manipulate them through dragging and resizing. The tool supports adding multiple shapes, allowing for complex designs. Once satisfied, users can download the final SVG file, making it an ideal solution for graphic designers and web developers looking to create scalable vector graphics efficiently. ",
     "contributors": [{
-        "name": "",
-        "githubId": ""
+        "name": "Sanskar Srivastava",
+        "githubId": "https://github.com/dhawalcoder42"
     }, {
         "name": "",
         "githubId": ""
diff --git a/src/routes/tools.json b/src/routes/tools.json
index 4618b3690..ee75ec1dd 100644
--- a/src/routes/tools.json
+++ b/src/routes/tools.json
@@ -134,6 +134,33 @@
             }
         ]
     },
+    "camera-recorder-2": {
+        "name": "Camera Recorder 2",
+        "link": "/camera-recorder-2",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
     "code-comparison-tool": {
         "name": "Code Comparison Tool",
         "link": "/code-comparison-tool",
@@ -161,6 +188,87 @@
             }
         ]
     },
+    "color-blindness-simulator": {
+        "name": "Color Blindness Simulator",
+        "link": "/color-blindness-simulator",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
+    "color-blindness-simulator-2": {
+        "name": "Color Blindness Simulator",
+        "link": "/color-blindness-simulator-2",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
+    "color-tools": {
+        "name": "Color Tools",
+        "link": "/color-tools",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
     "css-animator": {
         "name": "CSS Animator",
         "link": "/css-animator",
@@ -442,6 +550,60 @@
             }
         ]
     },
+    "integer-toolkit": {
+        "name": "Integer Toolkit",
+        "link": "/integer-toolkit",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
+    "integer-toolkit-2": {
+        "name": "Integer Toolkit",
+        "link": "/integer-toolkit-2",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
     "keyword-density-checker": {
         "name": "Keyword Density Checker",
         "link": "/keyword-density-checker",
@@ -469,6 +631,33 @@
             }
         ]
     },
+    "list-toolkit": {
+        "name": "List Toolkit",
+        "link": "/list-toolkit",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
     "living-background-generator": {
         "name": "Living Background Generator",
         "link": "/living-background-generator",
@@ -549,6 +738,33 @@
             }
         ]
     },
+    "multi-timer-with-alarm": {
+        "name": "Multi Timer With Alarm",
+        "link": "/multi-timer-with-alarm",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
     "neumorphism-generator": {
         "name": "Neumorphism Generator",
         "link": "/neumorphism-generator",
@@ -696,6 +912,87 @@
             }
         ]
     },
+    "svg-placeholder-generator": {
+        "name": "SVG Placeholder Generator",
+        "link": "/svg-placeholder-generator",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
+    "svg-shape-generator": {
+        "name": "SVG Shape Generator ",
+        "link": "/svg-shape-generator",
+        "description": "The SVG Shape Generator is a user-friendly web application designed to create and customize SVG shapes. Users can select from various predefined shapes, adjust their colors, and manipulate them through dragging and resizing. The tool supports adding multiple shapes, allowing for complex designs. Once satisfied, users can download the final SVG file, making it an ideal solution for graphic designers and web developers looking to create scalable vector graphics efficiently. ",
+        "contributors": [
+            {
+                "name": "Sanskar Srivastava",
+                "githubId": "https://github.com/dhawalcoder42"
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
+    "svg-shape-generator-2": {
+        "name": "SVG Shape Generator ",
+        "link": "/svg-shape-generator-2",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
+    },
     "text-toolkit": {
         "name": "Text Toolkit",
         "link": "/text-toolkit",
@@ -820,5 +1117,32 @@
                 "githubId": ""
             }
         ]
+    },
+    "youtube-thumbnail-grabber": {
+        "name": "YouTube Thumbnail Grabber",
+        "link": "/youtube-thumbnail-grabber",
+        "description": "",
+        "contributors": [
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            },
+            {
+                "name": "",
+                "githubId": ""
+            }
+        ]
     }
 }
\ No newline at end of file