Skip to content

Instantly share code, notes, and snippets.

@scalp42

scalp42/maintenance.html

Forked from svey/maintenance.html
Created July 30, 2019 03:28
Show Gist options
  • Save scalp42/d94bdd6b1c8931c0f1d173f1158937e4 to your computer and use it in GitHub Desktop.
Save scalp42/d94bdd6b1c8931c0f1d173f1158937e4 to your computer and use it in GitHub Desktop.
Download ZIP
maintenance page
Raw
maintenance.html
<!DOCTYPE html>
<html>
<head>
<title>Maintenance</title>
<style>
body {
background: black;
padding: 25px;
}
div {
background-color: black;
color: gold;
padding: 0 100px;
}
h1, h2 {
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
display: inline-block;
}
h1 {
font-size: 10em;
}
svg {
display:inline-block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<h2>Scheduled maintenance— We'll be back soon! -</h2>
<h1>W</h1>
<svg>
<mask id="cog1">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<circle cx="50" fill="none" stroke="black" stroke-width="22" stroke-dashArray="33.3" cy="50" r="53">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 50 50; 360 50 50" dur="5s" additive="sum" repeatCount="indefinite" />
</circle>
<circle fill="black" r="40" cx="50" cy="50" />
<!-- Everything under a black pixel will be invisible -->
</mask>
<circle fill="gold" mask="url(#cog1)" cx="50" cy="50" r="50"/>
</svg>
<h1>n</h1>
<svg>
<mask id="cog2">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<circle cx="50" fill="none" stroke="black" stroke-width="22" stroke-dashArray="33.3" stroke-dashOffset="33.3" cy="50" r="53">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 50 50; 360 50 50" dur="5s" additive="sum" repeatCount="indefinite" />
</circle>
<circle fill="black" r="5" cx="50" cy="50" />
<!-- Everything under a black pixel will be invisible -->
</mask>
<circle fill="gold" mask="url(#cog2)" cx="50" cy="50" r="50"/>
</svg>
<h1>l</h1>
<svg>
<mask id="cog3">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<circle cx="50" fill="none" stroke="black" stroke-width="22" stroke-dashArray="33.3" cy="50" r="53">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 50 50; 360 50 50" dur="5s" additive="sum" repeatCount="indefinite" />
</circle>
<circle fill="black" r="30" cx="50" cy="50" />
<!-- Everything under a black pixel will be invisible -->
</mask>
<circle fill="gold" mask="url(#cog3)" cx="50" cy="50" r="50"/>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment