Skip to content

Instantly share code, notes, and snippets.

@reitowo

reitowo/index.html

Created November 14, 2025 05:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save reitowo/dad53149ad50cf30820d8bb00e5da102 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save reitowo/dad53149ad50cf30820d8bb00e5da102 to your computer and use it in GitHub Desktop.
Download ZIP
Transparent
Raw
index.html
// test-large.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
width: 5000px;
height: 5000px;
background: transparent;
overflow: hidden;
}
.content {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.circle {
position: absolute;
border-radius: 50%;
opacity: 0.7;
}
.text {
position: absolute;
font-family: Arial, sans-serif;
font-size: 100px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
5000x5000<br>
Test
</div>
</div>
<script>
const circleConfigs = [
{ size: 150, x: 500, y: 500, color: '#ff6b6b' },
{ size: 200, x: 1200, y: 800, color: '#4ecdc4' },
{ size: 120, x: 2000, y: 1500, color: '#45b7d1' },
{ size: 180, x: 3000, y: 2000, color: '#96ceb4' },
{ size: 250, x: 1500, y: 3000, color: '#ffeaa7' },
{ size: 160, x: 3500, y: 1000, color: '#fd79a8' },
{ size: 220, x: 4000, y: 3500, color: '#ff6b6b' },
{ size: 140, x: 800, y: 4000, color: '#4ecdc4' },
{ size: 190, x: 2500, y: 4200, color: '#45b7d1' },
{ size: 170, x: 4200, y: 2500, color: '#96ceb4' },
{ size: 210, x: 1000, y: 2200, color: '#ffeaa7' },
{ size: 130, x: 3800, y: 800, color: '#fd79a8' },
{ size: 240, x: 600, y: 3800, color: '#ff6b6b' },
{ size: 155, x: 2800, y: 600, color: '#4ecdc4' },
{ size: 185, x: 4400, y: 4000, color: '#45b7d1' },
{ size: 165, x: 200, y: 1800, color: '#96ceb4' },
{ size: 195, x: 3200, y: 3800, color: '#ffeaa7' },
{ size: 175, x: 1800, y: 200, color: '#fd79a8' },
{ size: 225, x: 4600, y: 1600, color: '#ff6b6b' },
{ size: 145, x: 1400, y: 4600, color: '#4ecdc4' }
];
setTimeout(() => {
circleConfigs.forEach(config => {
const circle = document.createElement('div');
circle.className = 'circle';
circle.style.width = config.size + 'px';
circle.style.height = config.size + 'px';
circle.style.left = config.x + 'px';
circle.style.top = config.y + 'px';
circle.style.backgroundColor = config.color;
document.querySelector('.content').appendChild(circle);
});
}, 1500)
</script>
</body>
</html>
Raw
main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
const fs = require('node:fs')
async function testCapture(
filename,
window,
) {
const pageWidth = 5000;
const pageHeight = 5000;
window.setContentSize(pageWidth, pageHeight);
await window.loadFile('index.html');
await new Promise((resolve) => setTimeout(resolve, 1000));
const bitmap = await new Promise((resolve, reject) => {
window.webContents.on('paint', async (_event, _dirtyRect, image) => {
try {
resolve(image);
} catch (e) {
reject(e);
}
});
});
window.webContents.removeAllListeners('paint');
const png = bitmap.toPNG()
const p = path.join("D:\electron-fiddle-transparent", filename)
fs.writeFileSync(p, png)
}
app.disableHardwareAcceleration();
app.whenReady().then(async () => {
console.log('🔧 Electron version:', process.versions.electron);
console.log('🔧 Chromium version:', process.versions.chrome);
console.log('🔧 Node.js version:', process.versions.node);
// Create the browser window.
const mainWindow = new BrowserWindow({
show: false,
frame: false,
transparent: true,
webPreferences: {
offscreen: true
}
})
console.log('\n🖥️ first test');
await testCapture(
`${process.versions.electron}-first.png`,
mainWindow
);
console.log('\n📺 second test');
await testCapture(
`${process.versions.electron}-second.png`,
mainWindow
);
console.log('\n📺 done');
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
Raw
package.json
{
"name": "tender-celebration-forego-k3sjr",
"productName": "tender-celebration-forego-k3sjr",
"description": "My Electron application description",
"keywords": [],
"main": "./main.js",
"version": "1.0.0",
"author": "zhongwei.wang",
"scripts": {
"start": "electron ."
},
"dependencies": {},
"devDependencies": {
"electron": "39.1.2"
}
}
Raw
preload.js
/**
* The preload script runs before `index.html` is loaded
* in the renderer. It has access to web APIs as well as
* Electron's renderer process modules and some polyfilled
* Node.js functions.
*
* https://www.electronjs.org/docs/latest/tutorial/sandbox
*/
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
Raw
renderer.js
/**
* This file is loaded via the <script> tag in the index.html file and will
* be executed in the renderer process for that window. No Node.js APIs are
* available in this process because `nodeIntegration` is turned off and
* `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
* to expose Node.js functionality from the main process.
*/
Raw
styles.css
/* styles.css */
/* Add styles here to customize the appearance of your app */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment