Skip to content

Instantly share code, notes, and snippets.

@victorwads

victorwads/gitCiLoadingToGif.html

Last active October 15, 2024 19:28
Show Gist options
  • Save victorwads/241a5ee64134a80ec39ecc1da677bf0f to your computer and use it in GitHub Desktop.
Save victorwads/241a5ee64134a80ec39ecc1da677bf0f to your computer and use it in GitHub Desktop.
Download ZIP
Create a GIF from SVG rotation with js
Raw
gitCiLoadingToGif.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://jnordberg.github.io/gif.js/gif.js"></script>
<title>SVG to GIF</title>
</head>
<body>
<h3>Comands:</h3>
<button id="createGif">Create GIF</button>
<h3>Canvas:</h3>
<canvas id="canvas" width="500" height="500" style="border: 1px solid black;"></canvas>
<h3>SVG:</h3>
<div id="svgContainer"></div>
<h3>Result:</h3>
<img id="resultGif" alt="Generated GIF will appear here"
style="border: 1px solid black;width: 500px; height: 500px;display: block;" />
<img id="resultGif2" alt="Generated GIF will appear here"
style="border: 1px solid black;width: 500px; height: 500px;display: block;background: black;" />
<script src="./gitCiLoadingToGif.js"></script>
</body>
</html>
Raw
gitCiLoadingToGif.js
function generateRotatingSVG(angle) {
return `
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 16 16">
<path stroke="#DBAB0A" stroke-width="2" d="M3.05 3.05a7 7 0 1 1 9.9 9.9 7 7 0 0 1-9.9-9.9Z" opacity=".5"></path>
<path fill="#DBAB0A" fill-rule="evenodd" d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" clip-rule="evenodd"></path>
<g transform="rotate(${angle} 8 8)">
<path fill="#DBAB0A" d="M14 8a6 6 0 0 0-6-6V0a8 8 0 0 1 8 8h-2Z"></path>
</g>
</svg>`;
}
function addResultGif(id, url) {
const resultGif = document.getElementById(id);
resultGif.src = url;
console.log(id, resultGif.src);
}
document.getElementById('createGif').addEventListener('click', function () {
const img = new Image();
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const gif = new GIF({
workers: 1,
quality: 10,
background: '#00f',
transparent: '#0f0',
//workerScript: 'http://jnordberg.github.io/gif.js/gif.worker.js' need to download it and put in the http server to work
});
gif.on('progress', function (progress) {
console.log(`Progress: ${Math.round(progress * 100)}%`);
});
gif.on('finished', function (blob) {
let url = URL.createObjectURL(blob);
addResultGif('resultGif', url);
addResultGif('resultGif2', url);
});
const fps = 24; // Frames por segundo
const totalFrames = fps * 2;
function drawFrame(frameIndex = 0) {
const angle = (360 / totalFrames) * frameIndex; // Calcular o ângulo de rotação
const svgContent = generateRotatingSVG(angle); // Gerar SVG para o frame atual
const img = new Image();
img.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
gif.addFrame(canvas, {copy: true, delay: 1000 / fps});
console.log(`Frame ${frameIndex}/${totalFrames} added`);
if (frameIndex < totalFrames) {
drawFrame(frameIndex + 1);
} else {
gif.on('finished', function(blob) {
const resultGif = document.getElementById('resultGif');
resultGif.src = URL.createObjectURL(blob); // Exibir o GIF gerado
});
gif.render(); // Renderizar o GIF
}
};
// Converter o SVG em Data URL e carregar no Image
const svgBlob = new Blob([svgContent], {type: 'image/svg+xml;charset=utf-8'});
const url = URL.createObjectURL(svgBlob);
img.src = url;
}
drawFrame();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment