Skip to content

Instantly share code, notes, and snippets.

@bellbind

bellbind/clock.html

Last active August 22, 2023 12:30
Show Gist options
  • Save bellbind/b9d1df2b906b5cc1d0cbd072d1e216e2 to your computer and use it in GitHub Desktop.
Save bellbind/b9d1df2b906b5cc1d0cbd072d1e216e2 to your computer and use it in GitHub Desktop.
Download ZIP
[SVG][JavaScript] SVG Analog Clock
Raw
clock.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no" />
<link rel="icon" href="././clock.svg" />
<link rel="manifest" href="./manifest.json" />
<title>SVG Clock</title>
<style>
html {height: 100%;}
body {
margin: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #334444;
}
object {
width: 100vmin;
height: 100vmin;
}
</style>
</head>
<body>
<object data="./clock.svg" />
</body>
</html>
Display the source blob
Display the rendered blob
Raw
clock.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!doctype html>
<html>
<head>
</head>
<body style="display: flex; background-color: #3c4044; color: #dddddd;">
<div style="text-align: center;">
<h1>&lt;img src="./clock.svg" /&gt;</h1>
<img src="./clock.svg" />
<p>NOTE: script and web font are disabled</p>
</div>
<hr />
<div style="text-align: center;">
<h1>&lt;object data="./clock.svg"&gt;&lt;/object&gt;</h1>
<object data="./clock.svg"></object>
<p>NOTE: cannot omit a closing tag &lt;/object&gt;</p>
</div>
<hr />
<div style="text-align: center;">
<h1>objectElement.contentWindow from HTML</h1>
<object data="./clock.svg"></object>
<div>
<button onclick="this.parentNode.parentNode.querySelector('object').contentWindow.clock.showDigital()">show digital panel</button>
<button onclick="this.parentNode.parentNode.querySelector('object').contentWindow.clock.hideDigital()">hide digital panel</button>
</div>
<p>NOTE: cannot access contentWindow when file: protocol</p>
</div>
</body>
</html>
Raw
manifest.json
{
"short_name": "SVG Clock",
"name": "SVG Analog Clock",
"icons": [
{
"src": "./clock.svg",
"type": "image/svg+xml",
"sizes": "320x320"
}
],
"start_url": "./clock.html",
"theme_color": "#334444",
"background_color": "#334444",
"display": "standalone",
"display_override": ["fullscreen", "minimal-ui", "window-controls-overlay", "browser"]
}
@bellbind
Copy link
Author

bellbind commented Aug 11, 2022 •
edited
Loading

demo:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment