Skip to content

Instantly share code, notes, and snippets.

@fakenickels

fakenickels/svg to video.html

Created November 13, 2021 18:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fakenickels/41fd6d161402519e8660daae33f759a1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fakenickels/41fd6d161402519e8660daae33f759a1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg to video.html
<html>
<body>
<style>
#canvas {
border: 1px solid black;
background-color: white;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.5.6/RecordRTC.js"></script>
<p>Paste your SVG base64 or source here</p>
<p>
<textarea rows="30" id="svg" cols="100"></textarea>
</p>
<p>
<button id="record" type="button">Record</button>
<button id="stop" disabled=true type="button">Stop recording</button>
</p>
<p>Preview:</p>
<p>
<canvas width="1012" height="506" id="canvas"></canvas>
</p>
<image
id="input"
style="opacity: 0"
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxMiIgaGVpZ2h0PSI1MDYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnPgoKICA8IS0tIFRoZSBjYW52YXMgZm9yIG91ciBwYXR0ZXJuIC0tPgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IndoaXRlIiAvPgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZGllbnQpIiAvPgoKICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfOTk6MikiPgogICAgPHBhdGggb3BhY2l0eT0iMC42IiBkPSJNNTA5LjUgMjg1LjVINTFNNTA5LjUgMTg4Ljc1SDUxTTUxIDE0MC4zNzVINTA5LjVNNTA5LjUgMjM3LjEyNUg1MU01MSAzODIuMjVINTA5LjVNNTA5LjUgMzMzLjg3NUg1MU01MSA0MzAuNjI1SDUwOS41TTI4MC4yNSA0NzlWOTJNMzk0Ljg3NSA0NzlWOTJNMTY1LjYyNSA0NzlWOTJNMTA4LjMxMiA0NzlWOTJNMjIyLjkzOCA0NzlWOTJNMzM3LjU2MiA0NzlWOTJNNDUyLjE4OCA0NzlWOTIiIHN0cm9rZT0id2hpdGUiIC8+CgogICAgPHRleHQgZmlsbD0iI0QxOUYxNyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSInQ291cmllciBOZXcnLCBtb25vc3BhY2UiIGZvbnQtc2l6ZT0iMzYiIGZvbnQtd2VpZ2h0PSI2MDAiIGxldHRlci1zcGFjaW5nPSIwZW0iPgogICAgICA8dHNwYW4geD0iMjU3IiB5PSIxMjUuMzA1Ij5DRVJUSUZJQ0FURSBPRiBDT01QTEVUSU9OPC90c3Bhbj4KICAgIDwvdGV4dD4KCiAgICA8dGV4dCBmaWxsPSIjRDE5RjE3IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IidDb3VyaWVyIE5ldycsIG1vbm9zcGFjZSIgZm9udC1zaXplPSIzMCIgZm9udC13ZWlnaHQ9IjMwMCIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+CiAgICAgIDx0c3BhbiB4PSIzOTYiIHk9IjE3Ny43NTQiPkNvdXJzZXItby1OYXRvcjwvdHNwYW4+CiAgICA8L3RleHQ+CiAgICA8dGV4dCBmaWxsPSIjMzgwNzJBIiBmaWxsLW9wYWNpdHk9IjAuMzYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iJ0NvdXJpZXIgTmV3JywgbW9ub3NwYWNlIiBmb250LXNpemU9IjI1IiBmb250LXdlaWdodD0iNjAwIiBsZXR0ZXItc3BhY2luZz0iMGVtIj4KICAgICAgPHRzcGFuIHg9Ijk4IiB5PSIyNzMuOTYyIj5UaGlzIGlzIHRvIGNlcnRpZnkgdGhhdCB0aGUgY3VycmVudCBIT0RMRVIgc3VjY2Vzc2Z1bGx5IDwvdHNwYW4+CiAgICAgIDx0c3BhbiB4PSI5OCIgeT0iMzAzLjk2MyI+Y29tcGxldGVkIDQyIGhvdXJzIG9mIFNhbGVzcGVyc29uIG9mIEpQRUdzICYjMTA7PC90c3Bhbj4KICAgICAgPHRzcGFuIHg9Ijk4IiB5PSIzMzMuOTYzIj5vbiAzMS8wMjwvdHNwYW4+CiAgICA8L3RleHQ+IAoKICAgIDx0ZXh0IHRleHQtcmVuZGVyaW5nPSJvcHRpbWl6ZVNwZWVkIj4KICAgICAgPHRleHRQYXRoIHN0YXJ0T2Zmc2V0PSItMTAwJSIgZmlsbD0id2hpdGUiIGZvbnQtZmFtaWx5PSInQ291cmllciBOZXcnLCBtb25vc3BhY2UiIGZvbnQtc2l6ZT0iMTRweCIgZm9udC13ZWlnaHQ9ImJvbGQiIHhsaW5rOmhyZWY9IiN0ZXh0LXBhdGgtYSI+MDEwMDExMDAgMDExMDExMTEgMDExMTAwMTAgMDExMDAxMDEgMDExMDExMDEgMDAxMDAwMDAgMDExMDEwMDEgMDExMTAwMDAgMDExMTAwMTEgMDExMTAxMDEgMDExMDExMDEgMDAxMDAwMDAgMDExMDAxMDAgMDExMDExMTEgMDExMDExMDAgMDExMDExMTEgMDExMTAwMTAgMDAxMDAwMDAgMDExMTAwMTEgMDExMDEwMDEgMDExMTAxMDAgMDAxMDAwMDAgMDExMDAwMDEgMDExMDExMDEgMDExMDAxMDEgMDExMTAxMDAgMDAxMDExMDAgMDAxMDAwMDAgMDExMDAwMTEgMDExMDExMTEgMDExMDExMTAgMDExMTAwMTEgMDExMDAxMDEgMDExMDAwMTEgMDExMTAxMDAgMDExMDAxMDEgMDExMTAxMDAgMDExMTAxMDEgMDExMTAwMTAgMDAxMDAwMDAgMDExMDAwMDEgMDExMDAxMDAgMDExMDEwMDEgMDExMTAwMDAgMDExMDEwMDEgMDExMTAwMTEgMDExMDAwMTEgMDExMDEwMDEgMDExMDExMTAgMDExMDAxMTEgMDAxMDAwMDAgMDExMDAxMDEgMDExMDExMDAgMDExMDEwMDEgMDExMTAxMDAgMDAxMDExMDAgMDAxMDAwMDAgMDExMTAwMTEgMDExMDAxMDEgMDExMDAxMDAgMDAxMDAwMDAgMDExMDAxMDAgMDExMDExMTEgMDAxMDAwMDAgMDExMDAxMDEgMDExMDEwMDEgMDExMTAxMDEgMDExMTAwMTEgMDExMDExMDEgMDExMDExMTEgMDExMDAxMDAgMDAxMDAwMDAgMDExMTAxMDAgMDExMDAxMDEgMDExMDExMDEgMDExMTAwMDAgMDExMDExMTEgMDExMTAwMTAgMDAxMDAwMDAgMDExMDEwMDEgMDExMDExMTAgMDExMDAwMTEgMDExMDEwMDEgMDExMDAxMDAgMDExMDEwMDEgMDExMDAxMDAgMDExMTAxMDEgMDExMDExMTAgMDExMTAxMDAgMDAxMDAwMDAgMDExMTAxMDEgMDExMTAxMDAgMDAxMDAwMDAgMDExMDExMDAgMDExMDAwMDEgMDExMDAwMTAgMDExMDExMTEgMDExMTAwMTAgMDExMDAxMDEgMDAxMDAwMDAgMDExMDAxMDEgMDExMTAxMDAgMDAxMDAwMDAgMDExMDAxMDAgMDExMDExMTEgMDExMDExMDAgMDExMDExMTEgMDExMTAwMTAgMDExMDAxMDEgMDAxMDAwMDAgMDExMDExMDEgMDExMDAwMDEgMDExMDAxMTEgMDExMDExMTAgMDExMDAwMDEgMDAxMDAwMDAgMDExMDAwMDEgMDExMDExMDAgMDExMDEwMDEgMDExMTAwMDEgMDExMTAxMDEgMDExMDAwMDEgMDAxMDExMTAKICAgICAgICA8YW5pbWF0ZSBpZD0idDEiIGFkZGl0aXZlPSJzdW0iIGF0dHJpYnV0ZU5hbWU9InN0YXJ0T2Zmc2V0IiBmcm9tPSIwJSIgdG89IjEwMCUiIGJlZ2luPSIwO3QyLmVuZCIgZHVyPSIzMHMiIC8+CiAgICAgIDwvdGV4dFBhdGg+CiAgICAgIDx0ZXh0UGF0aCBzdGFydE9mZnNldD0iLTEwMCUiIGZpbGw9IndoaXRlIiBmb250LWZhbWlseT0iJ0NvdXJpZXIgTmV3JywgbW9ub3NwYWNlIiBmb250LXNpemU9IjE0cHgiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bGluazpocmVmPSIjdGV4dC1wYXRoLWEiPjAxMDAxMTAwIDAxMTAxMTExIDAxMTEwMDEwIDAxMTAwMTAxIDAxMTAxMTAxIDAwMTAwMDAwIDAxMTAxMDAxIDAxMTEwMDAwIDAxMTEwMDExIDAxMTEwMTAxIDAxMTAxMTAxIDAwMTAwMDAwIDAxMTAwMTAwIDAxMTAxMTExIDAxMTAxMTAwIDAxMTAxMTExIDAxMTEwMDEwIDAwMTAwMDAwIDAxMTEwMDExIDAxMTAxMDAxIDAxMTEwMTAwIDAwMTAwMDAwIDAxMTAwMDAxIDAxMTAxMTAxIDAxMTAwMTAxIDAxMTEwMTAwIDAwMTAxMTAwIDAwMTAwMDAwIDAxMTAwMDExIDAxMTAxMTExIDAxMTAxMTEwIDAxMTEwMDExIDAxMTAwMTAxIDAxMTAwMDExIDAxMTEwMTAwIDAxMTAwMTAxIDAxMTEwMTAwIDAxMTEwMTAxIDAxMTEwMDEwIDAwMTAwMDAwIDAxMTAwMDAxIDAxMTAwMTAwIDAxMTAxMDAxIDAxMTEwMDAwIDAxMTAxMDAxIDAxMTEwMDExIDAxMTAwMDExIDAxMTAxMDAxIDAxMTAxMTEwIDAxMTAwMTExIDAwMTAwMDAwIDAxMTAwMTAxIDAxMTAxMTAwIDAxMTAxMDAxIDAxMTEwMTAwIDAwMTAxMTAwIDAwMTAwMDAwIDAxMTEwMDExIDAxMTAwMTAxIDAxMTAwMTAwIDAwMTAwMDAwIDAxMTAwMTAwIDAxMTAxMTExIDAwMTAwMDAwIDAxMTAwMTAxIDAxMTAxMDAxIDAxMTEwMTAxIDAxMTEwMDExIDAxMTAxMTAxIDAxMTAxMTExIDAxMTAwMTAwIDAwMTAwMDAwIDAxMTEwMTAwIDAxMTAwMTAxIDAxMTAxMTAxIDAxMTEwMDAwIDAxMTAxMTExIDAxMTEwMDEwIDAwMTAwMDAwIDAxMTAxMDAxIDAxMTAxMTEwIDAxMTAwMDExIDAxMTAxMDAxIDAxMTAwMTAwIDAxMTAxMDAxIDAxMTAwMTAwIDAxMTEwMTAxIDAxMTAxMTEwIDAxMTEwMTAwIDAwMTAwMDAwIDAxMTEwMTAxIDAxMTEwMTAwIDAwMTAwMDAwIDAxMTAxMTAwIDAxMTAwMDAxIDAxMTAwMDEwIDAxMTAxMTExIDAxMTEwMDEwIDAxMTAwMTAxIDAwMTAwMDAwIDAxMTAwMTAxIDAxMTEwMTAwIDAwMTAwMDAwIDAxMTAwMTAwIDAxMTAxMTExIDAxMTAxMTAwIDAxMTAxMTExIDAxMTEwMDEwIDAxMTAwMTAxIDAwMTAwMDAwIDAxMTAxMTAxIDAxMTAwMDAxIDAxMTAwMTExIDAxMTAxMTEwIDAxMTAwMDAxIDAwMTAwMDAwIDAxMTAwMDAxIDAxMTAxMTAwIDAxMTAxMDAxIDAxMTEwMDAxIDAxMTEwMTAxIDAxMTAwMDAxIDAwMTAxMTEwCiAgICAgICAgPGFuaW1hdGUgaWQ9InQyIiBhZGRpdGl2ZT0ic3VtIiBhdHRyaWJ1dGVOYW1lPSJzdGFydE9mZnNldCIgZnJvbT0iMCUiIHRvPSIxMDAlIiBiZWdpbj0idDEuZW5kIiBkdXI9IjMwcyIgLz4KICAgICAgPC90ZXh0UGF0aD4KICAgIDwvdGV4dD4KICA8L2c+CgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjUwNiIgeTE9Ii0xLjM5NDM2ZS0wNSIgeDI9Ii03LjkzOTgyIiB5Mj0iNjMzLjk2NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMDE2NDAyNSIgc3RvcC1jb2xvcj0iI0YzQzMxNyIgc3RvcC1vcGFjaXR5PSIwLjgxIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzEzNTQyIiBzdG9wLWNvbG9yPSIjRDVERUNFIiBzdG9wLW9wYWNpdHk9IjAuMjM1OTAxIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNzY1NjI1IiBzdG9wLWNvbG9yPSIjNzlDRkE2IiBzdG9wLW9wYWNpdHk9IjAuMDU1NzU4MyIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQzNGQkY3IiBzdG9wLW9wYWNpdHk9IjAiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPHBhdGggaWQ9InRleHQtcGF0aC1hIiBkPSJNNzcgMjRIOTQyQzk1Ny40NjQgMjQgOTcwIDM2LjUzNiA5NzAgNTJWNDU0Qzk3MCA0NjkuNDY0IDk1Ny40NjQgNDgyIDk0MiA0ODJINzdDNjEuNTM2IDQ4MiA0OSA0NjkuNDY0IDQ5IDQ1NFY1MkM0OSAzNi41MzYgNjEuNTM2IDI0IDc3IDI0WiIgLz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcDBfOTk6MiI+CiAgICAgIDxyZWN0IHdpZHRoPSIxMDEyIiBoZWlnaHQ9IjUwNiIgZmlsbD0id2hpdGUiIC8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+Cg=="
/>
<script type="text/javascript">
var textarea = document.getElementById('svg');
var img = document.getElementById('input');
textarea.addEventListener('change', () => {
img.src = "data:image/svg+xml;base64," + textarea.value;
})
</script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("input");
var data = [],
stream = canvas.captureStream(),
recorder = new MediaRecorder(stream, { mimeType: "video/webm" });
var height;
var width;
recorder.ondataavailable = function (event) {
if (event.data && event.data.size) {
data.push(event.data);
}
};
img.onload = () => {
width = canvas.width = img.width;
height = canvas.height = img.height;
}
function download() {
var blob = new Blob(data, {
type: "video/webm",
});
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "test.webm";
a.click();
window.URL.revokeObjectURL(url);
}
var isRecording = false;
var timerId;
function loop() {
if (isRecording) {
// fills the background with white
recorder.requestData();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.fillRect(0, 0, height, width);
ctx.drawImage(img, 0, 0);
}
requestAnimationFrame(loop);
}
// fills the background with white
ctx.fillStyle = "white";
ctx.fillRect(0, 0, height, width);
ctx.drawImage(img, 0, 0);
loop()
var recordButton = document.getElementById("record");
var stopButton = document.getElementById("stop");
recordButton.addEventListener("click", function () {
isRecording = true;
recordButton.setAttribute("disabled", "disabled");
stopButton.removeAttribute("disabled");
recorder.start();
});
stopButton.addEventListener("click", function () {
isRecording = false;
recorder.stop();
download();
recordButton.removeAttribute("disabled");
stopButton.setAttribute("disabled", "disabled");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment