Reliable Dev Core Changelog Animation

The dots in this symbol were generated using a script, which you can also use to import transparent PNGs. You can view the live animation here: https://reliable.dev/changelog/

Feel free to include this script in an HTML document and import any transparent PNG to experiment with:

<input type="file" id="imageInput" accept="image/*">

<div id="container"></div>

<script>

document.getElementById('imageInput').addEventListener('change', function (e) {

const container = document.getElementById('container');

container.innerHTML = ''; // Clear previous dots

const file = e.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = function (e) {

const img = new Image();

img.src = e.target.result;

img.onload = function () {

const canvas = document.createElement('canvas');

const context = canvas.getContext('2d');

const width = img.width;

const height = img.height;

const dotSize = 5; // Set the dot size to 5 pixels

const spacing = 0; // Removed spacing

canvas.width = width;

canvas.height = height;

context.drawImage(img, 0, 0, width, height);

for (let x = 0; x < width; x += dotSize) {

for (let y = 0; y < height; y += dotSize) {

const pixelData = context.getImageData(x, y, 1, 1).data;

// Check if the pixel is not fully transparent

if (pixelData[3] > 0) {

const dot = document.createElement('div');

dot.className = 'dot';

dot.style.left = x + 'px';

dot.style.top = y + 'px';

container.appendChild(dot);

}

}

}

};

};

reader.readAsDataURL(file);

}

});

</script>