Spaces:
Running
Running
I will give you x and y coordinates and connect that. each coordinates must be in like 1 inch gap in graph. draw lines by connecting dots connect dots (0,0) to (4,4) (0,4) to (4,0) (0,2) to (2,0) (2,0) to (4,2) (4,2) to (2,4) (2,4) to (0,2) (0,0) to (4,0) (4,0) to (4,4) (4,4) to (0,4) (0,4) to (0,0)
8e3cd77 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Graphy McGraphFace: The Dot Connector</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="w-full max-w-4xl mx-auto"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-indigo-700 mb-2">Graphy McGraphFace</h1> | |
| <p class="text-xl text-gray-600">The Dot Connector 🎯</p> | |
| </header> | |
| <div class="bg-white rounded-xl shadow-xl p-6"> | |
| <div class="graph-container relative" id="graphContainer"> | |
| <svg id="graph" class="w-full h-full" viewBox="0 0 500 500"></svg> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button id="animateBtn" class="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow hover:bg-indigo-700 transition"> | |
| <i data-feather="play" class="inline mr-2"></i> Animate Connections | |
| </button> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |