diff --git a/jscanvasanimation/index.html b/jscanvasanimation/index.html
new file mode 100644
index 00000000..d34a1240
--- /dev/null
+++ b/jscanvasanimation/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ Vite App
+
+
+
+
+
+
+
+
diff --git a/jscanvasanimation/javascript.svg b/jscanvasanimation/javascript.svg
new file mode 100644
index 00000000..f9abb2b7
--- /dev/null
+++ b/jscanvasanimation/javascript.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/jscanvasanimation/main.js b/jscanvasanimation/main.js
new file mode 100644
index 00000000..26eb319d
--- /dev/null
+++ b/jscanvasanimation/main.js
@@ -0,0 +1,58 @@
+import './style.css'
+import pathsss from './signature'
+const canvas=document.getElementById('myCanvas')
+console.log(canvas)
+const ctx=canvas.getContext('2d')
+let isDrawing=false
+let paths=[]
+
+
+canvas.addEventListener('mousedown',()=>{
+ // isDrawing=true
+ paths=[]
+})
+canvas.addEventListener('mousemove',(e)=>{
+ if(!isDrawing)return
+ const x=e.offsetX
+ const y=e.offsetY
+ ctx.lineTo(x,y)
+ ctx.stroke()
+
+ paths.push({x,y})
+ console.log(JSON.stringify(paths))
+})
+canvas.addEventListener('mouseup',()=>{
+ isDrawing=false,
+ ctx.beginPath()
+
+})
+canvas.addEventListener('mouseleave',()=>{
+ isDrawing=false
+ ctx.beginPath()
+
+})
+
+console.log(pathsss)
+function getRandomColor() {
+ var letters = '0123456789ABCDEF';
+ var color = '#';
+ for (var i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+}
+let cpoint=0
+const drawSign=()=>{
+ if(cpoint>=pathsss.length-1) return
+ const start=pathsss[cpoint]
+ const end=pathsss[cpoint+1]
+ ctx.beginPath()
+ ctx.moveTo(start.x,start.y)
+ ctx.lineTo(end.x,end.y)
+ ctx.lineWidth=1.5
+ ctx.stroke()
+ ctx.strokeStyle = '#fff'
+ cpoint++
+ requestAnimationFrame(drawSign)
+}
+drawSign()
\ No newline at end of file
diff --git a/jscanvasanimation/package.json b/jscanvasanimation/package.json
new file mode 100644
index 00000000..8f1249cb
--- /dev/null
+++ b/jscanvasanimation/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "mcx",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "devDependencies": {
+ "vite": "^5.4.8"
+ },
+ "dependencies": {
+ "mcx": "file:"
+ }
+}
diff --git a/jscanvasanimation/public/vite.svg b/jscanvasanimation/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/jscanvasanimation/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/jscanvasanimation/signature.js b/jscanvasanimation/signature.js
new file mode 100644
index 00000000..fdc5374f
--- /dev/null
+++ b/jscanvasanimation/signature.js
@@ -0,0 +1,2 @@
+const s=[{"x":38,"y":43},{"x":38,"y":43},{"x":38,"y":44},{"x":38,"y":45},{"x":38,"y":45},{"x":38,"y":47},{"x":38,"y":47},{"x":38,"y":48},{"x":40,"y":55},{"x":40,"y":56},{"x":40,"y":57},{"x":41,"y":57},{"x":41,"y":58},{"x":41,"y":59},{"x":51,"y":65},{"x":51,"y":65},{"x":52,"y":65},{"x":53,"y":65},{"x":54,"y":66},{"x":55,"y":66},{"x":56,"y":66},{"x":57,"y":66},{"x":57,"y":66},{"x":58,"y":66},{"x":65,"y":66},{"x":67,"y":66},{"x":68,"y":66},{"x":75,"y":65},{"x":76,"y":65},{"x":77,"y":64},{"x":79,"y":63},{"x":80,"y":63},{"x":86,"y":62},{"x":87,"y":62},{"x":89,"y":62},{"x":90,"y":61},{"x":91,"y":61},{"x":92,"y":61},{"x":93,"y":60},{"x":95,"y":60},{"x":96,"y":59},{"x":97,"y":59},{"x":97,"y":59},{"x":99,"y":58},{"x":99,"y":57},{"x":101,"y":57},{"x":101,"y":56},{"x":101,"y":55},{"x":102,"y":55},{"x":102,"y":55},{"x":103,"y":55},{"x":103,"y":54},{"x":103,"y":51},{"x":103,"y":51},{"x":103,"y":50},{"x":102,"y":49},{"x":102,"y":48},{"x":102,"y":47},{"x":101,"y":47},{"x":101,"y":47},{"x":101,"y":47},{"x":101,"y":48},{"x":101,"y":49},{"x":101,"y":50},{"x":101,"y":51},{"x":101,"y":51},{"x":101,"y":53},{"x":101,"y":54},{"x":101,"y":55},{"x":101,"y":56},{"x":101,"y":57},{"x":101,"y":57},{"x":101,"y":59},{"x":101,"y":61},{"x":101,"y":62},{"x":101,"y":63},{"x":101,"y":63},{"x":101,"y":64},{"x":101,"y":68},{"x":101,"y":69},{"x":101,"y":69},{"x":101,"y":71},{"x":101,"y":76},{"x":101,"y":77},{"x":101,"y":79},{"x":101,"y":81},{"x":100,"y":83},{"x":100,"y":84},{"x":99,"y":85},{"x":99,"y":87},{"x":99,"y":88},{"x":99,"y":89},{"x":98,"y":91},{"x":97,"y":93},{"x":96,"y":99},{"x":95,"y":101},{"x":94,"y":103},{"x":93,"y":104},{"x":93,"y":105},{"x":88,"y":113},{"x":87,"y":115},{"x":86,"y":117},{"x":85,"y":118},{"x":84,"y":119},{"x":83,"y":121},{"x":82,"y":123},{"x":81,"y":124},{"x":79,"y":125},{"x":79,"y":127},{"x":77,"y":128},{"x":75,"y":129},{"x":74,"y":130},{"x":73,"y":131},{"x":72,"y":132},{"x":70,"y":133},{"x":69,"y":134},{"x":67,"y":135},{"x":66,"y":135},{"x":64,"y":136},{"x":63,"y":137},{"x":62,"y":137},{"x":61,"y":137},{"x":58,"y":139},{"x":57,"y":139},{"x":56,"y":139},{"x":55,"y":139},{"x":55,"y":139},{"x":54,"y":139},{"x":51,"y":139},{"x":51,"y":139},{"x":50,"y":139},{"x":49,"y":138},{"x":49,"y":137},{"x":48,"y":137},{"x":47,"y":136},{"x":47,"y":135},{"x":47,"y":135},{"x":46,"y":135},{"x":46,"y":133},{"x":46,"y":133},{"x":46,"y":132},{"x":46,"y":131},{"x":45,"y":130},{"x":45,"y":129},{"x":45,"y":129},{"x":45,"y":127},{"x":45,"y":126},{"x":45,"y":125},{"x":45,"y":124},{"x":45,"y":123},{"x":45,"y":121},{"x":45,"y":119},{"x":46,"y":119},{"x":46,"y":117},{"x":47,"y":116},{"x":47,"y":114},{"x":47,"y":113},{"x":48,"y":112},{"x":49,"y":109},{"x":50,"y":109},{"x":51,"y":107},{"x":51,"y":106},{"x":52,"y":105},{"x":52,"y":104},{"x":57,"y":98},{"x":57,"y":97},{"x":58,"y":96},{"x":59,"y":95},{"x":59,"y":95},{"x":61,"y":92},{"x":61,"y":91},{"x":63,"y":90},{"x":63,"y":89},{"x":64,"y":88},{"x":65,"y":87},{"x":65,"y":87},{"x":66,"y":87},{"x":67,"y":86},{"x":68,"y":86},{"x":69,"y":85},{"x":70,"y":85},{"x":71,"y":84},{"x":71,"y":83},{"x":73,"y":83},{"x":73,"y":83},{"x":74,"y":82},{"x":75,"y":81},{"x":76,"y":81},{"x":77,"y":81},{"x":78,"y":80},{"x":79,"y":80},{"x":79,"y":80},{"x":81,"y":80},{"x":81,"y":80},{"x":82,"y":80},{"x":83,"y":80},{"x":85,"y":80},{"x":85,"y":80},{"x":89,"y":80},{"x":90,"y":81},{"x":91,"y":81},{"x":91,"y":81},{"x":93,"y":82},{"x":93,"y":82},{"x":94,"y":83},{"x":95,"y":84},{"x":96,"y":85},{"x":97,"y":85},{"x":98,"y":87},{"x":99,"y":87},{"x":101,"y":89},{"x":101,"y":89},{"x":103,"y":91},{"x":103,"y":91},{"x":104,"y":93},{"x":105,"y":95},{"x":106,"y":96},{"x":107,"y":97},{"x":109,"y":99},{"x":110,"y":100},{"x":112,"y":101},{"x":113,"y":103},{"x":115,"y":104},{"x":117,"y":105},{"x":118,"y":106},{"x":119,"y":107},{"x":121,"y":108},{"x":123,"y":109},{"x":124,"y":111},{"x":125,"y":111},{"x":129,"y":113},{"x":131,"y":115},{"x":133,"y":115},{"x":134,"y":116},{"x":136,"y":117},{"x":138,"y":117},{"x":142,"y":119},{"x":143,"y":119},{"x":145,"y":119},{"x":147,"y":119},{"x":148,"y":119},{"x":151,"y":119},{"x":151,"y":119},{"x":153,"y":119},{"x":153,"y":118},{"x":155,"y":117},{"x":155,"y":117},{"x":156,"y":117},{"x":157,"y":116},{"x":158,"y":115},{"x":159,"y":115},{"x":159,"y":114},{"x":160,"y":113},{"x":161,"y":112},{"x":161,"y":111},{"x":161,"y":111},{"x":162,"y":109},{"x":163,"y":109},{"x":163,"y":107},{"x":163,"y":107},{"x":164,"y":106},{"x":164,"y":105},{"x":165,"y":103},{"x":165,"y":101},{"x":165,"y":100},{"x":166,"y":99},{"x":167,"y":97},{"x":167,"y":96},{"x":167,"y":95},{"x":168,"y":93},{"x":168,"y":92},{"x":169,"y":90},{"x":169,"y":89},{"x":169,"y":89},{"x":169,"y":87},{"x":169,"y":86},{"x":169,"y":84},{"x":169,"y":83},{"x":169,"y":82},{"x":169,"y":81},{"x":169,"y":80},{"x":169,"y":79},{"x":169,"y":79},{"x":169,"y":78},{"x":169,"y":76},{"x":169,"y":75},{"x":169,"y":75},{"x":169,"y":74},{"x":169,"y":73},{"x":169,"y":73},{"x":169,"y":73},{"x":169,"y":74},{"x":169,"y":75},{"x":168,"y":75},{"x":168,"y":75},{"x":168,"y":76},{"x":168,"y":77},{"x":168,"y":77},{"x":168,"y":78},{"x":168,"y":79},{"x":168,"y":79},{"x":168,"y":80},{"x":169,"y":81},{"x":169,"y":81},{"x":169,"y":81},{"x":171,"y":83},{"x":171,"y":84},{"x":172,"y":85},{"x":173,"y":85},{"x":173,"y":86},{"x":173,"y":86},{"x":174,"y":86},{"x":175,"y":86},{"x":179,"y":86},{"x":179,"y":86},{"x":181,"y":85},{"x":181,"y":85},{"x":182,"y":85},{"x":184,"y":83},{"x":185,"y":83},{"x":185,"y":83},{"x":185,"y":83},{"x":186,"y":83},{"x":185,"y":83},{"x":185,"y":83},{"x":184,"y":83},{"x":184,"y":83},{"x":183,"y":84},{"x":182,"y":84},{"x":181,"y":85},{"x":177,"y":87},{"x":175,"y":87},{"x":174,"y":87},{"x":169,"y":89},{"x":169,"y":89},{"x":168,"y":90},{"x":167,"y":90},{"x":166,"y":90},{"x":166,"y":91},{"x":165,"y":91},{"x":166,"y":91},{"x":167,"y":91},{"x":167,"y":90},{"x":169,"y":89},{"x":169,"y":89},{"x":171,"y":89},{"x":172,"y":88},{"x":173,"y":87},{"x":175,"y":87},{"x":176,"y":87},{"x":178,"y":86},{"x":179,"y":85},{"x":181,"y":85},{"x":182,"y":85},{"x":183,"y":84},{"x":185,"y":84},{"x":187,"y":83},{"x":189,"y":83},{"x":190,"y":82},{"x":191,"y":82},{"x":193,"y":81},{"x":195,"y":81},{"x":196,"y":80},{"x":197,"y":80},{"x":198,"y":79},{"x":199,"y":79},{"x":199,"y":79},{"x":201,"y":78},{"x":202,"y":78},{"x":203,"y":77},{"x":203,"y":77},{"x":205,"y":77},{"x":205,"y":77},{"x":206,"y":77},{"x":207,"y":76},{"x":207,"y":76},{"x":208,"y":76},{"x":209,"y":76},{"x":209,"y":75},{"x":211,"y":75},{"x":213,"y":75},{"x":214,"y":75},{"x":215,"y":75},{"x":215,"y":75},{"x":216,"y":75},{"x":216,"y":76},{"x":216,"y":77},{"x":216,"y":77},{"x":216,"y":78},{"x":215,"y":79},{"x":215,"y":79},{"x":215,"y":80},{"x":215,"y":81},{"x":214,"y":81},{"x":213,"y":82},{"x":213,"y":83},{"x":213,"y":84},{"x":212,"y":85},{"x":212,"y":85},{"x":211,"y":87},{"x":211,"y":87},{"x":210,"y":89},{"x":209,"y":89},{"x":208,"y":90},{"x":207,"y":91},{"x":206,"y":92},{"x":205,"y":93},{"x":204,"y":94},{"x":203,"y":95},{"x":202,"y":96},{"x":202,"y":97},{"x":201,"y":98},{"x":201,"y":99},{"x":200,"y":99},{"x":199,"y":100},{"x":199,"y":101},{"x":199,"y":101},{"x":198,"y":102},{"x":198,"y":103},{"x":198,"y":103},{"x":198,"y":104},{"x":198,"y":105},{"x":199,"y":105},{"x":200,"y":106},{"x":201,"y":106},{"x":201,"y":107},{"x":203,"y":107},{"x":205,"y":107},{"x":207,"y":107},{"x":209,"y":107},{"x":211,"y":107},{"x":213,"y":107},{"x":216,"y":107},{"x":219,"y":107},{"x":221,"y":106},{"x":225,"y":106},{"x":228,"y":105},{"x":232,"y":105},{"x":236,"y":104},{"x":239,"y":103},{"x":243,"y":102},{"x":245,"y":101},{"x":249,"y":99},{"x":251,"y":99},{"x":255,"y":97},{"x":257,"y":96},{"x":260,"y":95},{"x":262,"y":94},{"x":263,"y":93},{"x":265,"y":92},{"x":265,"y":91},{"x":266,"y":90},{"x":267,"y":89},{"x":267,"y":89},{"x":267,"y":88},{"x":268,"y":87},{"x":268,"y":86},{"x":268,"y":85},{"x":268,"y":84},{"x":267,"y":83},{"x":267,"y":83},{"x":266,"y":81},{"x":265,"y":81},{"x":264,"y":79},{"x":263,"y":79},{"x":261,"y":77},{"x":259,"y":76},{"x":258,"y":75},{"x":256,"y":73},{"x":253,"y":72},{"x":251,"y":71},{"x":249,"y":69},{"x":246,"y":68},{"x":244,"y":67},{"x":241,"y":65},{"x":237,"y":64},{"x":235,"y":63},{"x":231,"y":61},{"x":229,"y":60},{"x":225,"y":59},{"x":223,"y":57},{"x":219,"y":55},{"x":216,"y":54},{"x":213,"y":53},{"x":210,"y":52},{"x":207,"y":51},{"x":204,"y":49},{"x":202,"y":49},{"x":200,"y":47},{"x":197,"y":46},{"x":195,"y":45},{"x":194,"y":44},{"x":192,"y":43},{"x":187,"y":41},{"x":186,"y":41},{"x":185,"y":40},{"x":185,"y":40},{"x":184,"y":39},{"x":183,"y":39},{"x":183,"y":39},{"x":181,"y":37},{"x":181,"y":37},{"x":180,"y":37},{"x":180,"y":37},{"x":179,"y":37},{"x":179,"y":36},{"x":179,"y":36},{"x":178,"y":36},{"x":177,"y":36},{"x":177,"y":36},{"x":176,"y":35},{"x":175,"y":35},{"x":175,"y":35},{"x":174,"y":35},{"x":173,"y":35},{"x":172,"y":35},{"x":171,"y":35},{"x":170,"y":35},{"x":169,"y":35},{"x":169,"y":35},{"x":167,"y":35},{"x":166,"y":35},{"x":164,"y":35},{"x":163,"y":35},{"x":161,"y":36},{"x":160,"y":36},{"x":159,"y":37},{"x":157,"y":37},{"x":155,"y":37},{"x":154,"y":38},{"x":153,"y":39},{"x":151,"y":39},{"x":149,"y":39},{"x":148,"y":40},{"x":147,"y":41},{"x":146,"y":41},{"x":144,"y":42},{"x":143,"y":43},{"x":143,"y":44},{"x":141,"y":45},{"x":141,"y":45},{"x":139,"y":47},{"x":139,"y":47},{"x":139,"y":49},{"x":138,"y":49},{"x":138,"y":50},{"x":137,"y":51},{"x":137,"y":51},{"x":137,"y":53},{"x":137,"y":53},{"x":137,"y":55},{"x":137,"y":55},{"x":137,"y":56},{"x":137,"y":57},{"x":137,"y":57},{"x":137,"y":58},{"x":137,"y":59},{"x":137,"y":59},{"x":138,"y":60},{"x":138,"y":61},{"x":139,"y":61},{"x":139,"y":62},{"x":140,"y":63},{"x":141,"y":63},{"x":143,"y":64},{"x":143,"y":65},{"x":145,"y":65},{"x":145,"y":66},{"x":146,"y":66},{"x":147,"y":67},{"x":150,"y":68},{"x":151,"y":69},{"x":152,"y":69},{"x":153,"y":69},{"x":154,"y":70},{"x":155,"y":71},{"x":157,"y":71},{"x":158,"y":71},{"x":159,"y":72},{"x":161,"y":72},{"x":162,"y":73},{"x":163,"y":73},{"x":165,"y":74},{"x":166,"y":74},{"x":168,"y":75},{"x":169,"y":75},{"x":171,"y":76},{"x":172,"y":76},{"x":173,"y":77},{"x":175,"y":77},{"x":177,"y":78},{"x":179,"y":78},{"x":181,"y":78},{"x":183,"y":79},{"x":185,"y":79},{"x":187,"y":79},{"x":189,"y":80},{"x":191,"y":80},{"x":193,"y":80},{"x":195,"y":81},{"x":198,"y":81},{"x":200,"y":81},{"x":203,"y":81},{"x":205,"y":81},{"x":207,"y":82},{"x":209,"y":82},{"x":211,"y":82},{"x":213,"y":82},{"x":216,"y":82},{"x":218,"y":83},{"x":220,"y":83},{"x":222,"y":83},{"x":224,"y":83},{"x":226,"y":83},{"x":228,"y":83}]
+export default s
\ No newline at end of file
diff --git a/jscanvasanimation/style.css b/jscanvasanimation/style.css
new file mode 100644
index 00000000..a52d5c94
--- /dev/null
+++ b/jscanvasanimation/style.css
@@ -0,0 +1,102 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+ filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
+
+#app{
+ height: 100%;
+}
+#myCanvas{
+ border: 1px solid;
+}
\ No newline at end of file