oskarsh/Extract.html

## Extract.html
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Path Extractor</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }
        .area {
            width: 80%;
            padding: 15px;
            border-radius: 4px;
        }

        #drop-area {
            border: 2px dashed #bbb;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding: 100px;
            text-align: center;
            font-family: monospace;
        }

        code {
            background-color: lightgray;
            padding: 10px;
        }

        button {
            font-family: monospace;
            background-color: black;
            color: white;
            padding: 2em;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="area">
        <div id="drop-area">
            DROP SVG HERE
        </div>
    </div>
    <button id="copy-button">Copy Code</button>
    <code id="output" />
    <script>
        const dropArea = document.getElementById("drop-area");
        const output = document.getElementById("output");

        dropArea.addEventListener("drop", (event) => {
            event.preventDefault();
            const file = event.dataTransfer.files[0];
            const reader = new FileReader();

            reader.addEventListener("load", (event) => {
                const svg = event.target.result;
                dropArea.innerHTML = svg;
                var pathData = '';
                const paths = dropArea.getElementsByTagName("path");
                for (let i = 0; i < paths.length; i++) {
                    pathData += paths[i].getAttribute("d");
                }
                output.innerText = pathData;
            });

            reader.readAsText(file);
        });

        dropArea.addEventListener("dragover", (event) => {
            event.preventDefault();
        });

        const copyButton = document.getElementById("copy-button");

        copyButton.addEventListener("click", () => {
            const selection = window.getSelection();
            const range = document.createRange();
            range.selectNodeContents(output);
            selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand("copy");
            selection.removeAllRanges();
        });
    </script>
</body>

</html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SVG Path Extractor</title>
	<style>
	body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	}
	.area {
	width: 80%;
	padding: 15px;
	border-radius: 4px;
	}

	#drop-area {
	border: 2px dashed #bbb;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 100px;
	text-align: center;
	font-family: monospace;
	}

	code {
	background-color: lightgray;
	padding: 10px;
	}

	button {
	font-family: monospace;
	background-color: black;
	color: white;
	padding: 2em;
	border-radius: 5px;
	cursor: pointer;
	}
	</style>
	</head>

	<body>
	<div class="area">
	<div id="drop-area">
	DROP SVG HERE
	</div>
	</div>
	<button id="copy-button">Copy Code</button>
	<code id="output" />
	<script>
	const dropArea = document.getElementById("drop-area");
	const output = document.getElementById("output");

	dropArea.addEventListener("drop", (event) => {
	event.preventDefault();
	const file = event.dataTransfer.files[0];
	const reader = new FileReader();

	reader.addEventListener("load", (event) => {
	const svg = event.target.result;
	dropArea.innerHTML = svg;
	var pathData = '';
	const paths = dropArea.getElementsByTagName("path");
	for (let i = 0; i < paths.length; i++) {
	pathData += paths[i].getAttribute("d");
	}
	output.innerText = pathData;
	});

	reader.readAsText(file);
	});

	dropArea.addEventListener("dragover", (event) => {
	event.preventDefault();
	});

	const copyButton = document.getElementById("copy-button");

	copyButton.addEventListener("click", () => {
	const selection = window.getSelection();
	const range = document.createRange();
	range.selectNodeContents(output);
	selection.removeAllRanges();
	selection.addRange(range);
	document.execCommand("copy");
	selection.removeAllRanges();
	});
	</script>
	</body>

	</html>