Skip to content

Instantly share code, notes, and snippets.

@deepakps22
Created October 25, 2019 07:09
Show Gist options
  • Select an option

  • Save deepakps22/6656345368a659712c1161a0afbdd7af to your computer and use it in GitHub Desktop.

Select an option

Save deepakps22/6656345368a659712c1161a0afbdd7af to your computer and use it in GitHub Desktop.
Hourglass

Hourglass

Not 100% exactly how sands in an hourglass fall, but close enough!

Used CSS Shapes - shape-outside to make have the text flow in an hourglass shape.

Blurred the text during animation to hopefully make it less dizzying for those prone to motion sickness.

Hourglass design purchased from PixMarket though Creative Market https://creativemarket.com/_human/799904-Hourglass

A Pen by Kristopher Van Sant on CodePen.

License.

<div>
<span class="left"></span>
<span class="right"></span>
<p><br><span class="margin"></span> hourglass time sand eternity boggle timer wicked witch minute game hourglass time sand eternity boggle timer wicked witch minute gamehourglass time sand eternity boggle timer wicked witch minute game hourglass time sand
eternity boggle timer wicked witch minute game hourglass time sand eternity boggle timer wicked witch minute game hourglass time sand eternity boggle timer wicked witch</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/hourglass.svg" alt="">
</div>
html {
height: 100%;
background-color: #6ca2ba;
}
body {
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #ffc12f;
font-size: 9px;
letter-spacing: 3px;
word-spacing: -3px;
font-family: "Handlee", cursive;
word-break: break-all;
text-transform: lowercase;
text-align: justify;
}
div {
height: 600px;
width: 370px;
min-height: 600px;
min-width: 370px;
position: relative;
}
img {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
}
.left {
float: left;
height: 600px;
width: 185px;
shape-outside: polygon(
28.02% 20.16%,
31.19% 24.27%,
38.11% 28.45%,
44.41% 31.04%,
52.05% 33.74%,
62.2% 36.7%,
73.68% 40.41%,
85.7% 43.87%,
93.86% 46.76%,
95.93% 49.82%,
92.99% 52.68%,
84.97% 55.68%,
74.71% 58.9%,
62.45% 62.08%,
51.06% 65.97%,
38.3% 70.39%,
31.77% 74.35%,
28.05% 77.43%,
26.43% 81.78%,
29.57% 87.93%,
31.96% 89.53%,
74.63% 89.54%,
99.45% 89.64%,
99.42% 99.51%,
7px 98.41%,
2.41% 0.11%,
100.02% 0.23%,
98.8% 7.51%,
31.62% 9.11%,
28.98% 10.56%,
26.76% 15.66%
);
}
.right {
float: right;
height: 600px;
width: 185px;
shape-outside: polygon(
97.62% 3px,
97.75% 96.93%,
0.24% 97.87%,
0.18% 89.7%,
68.14% 89.59%,
72.36% 85.4%,
72.59% 80.65%,
70.95% 76.24%,
63.8% 71.09%,
49.46% 65.97%,
35.84% 60.6%,
20.99% 56.65%,
10.96% 53.59%,
6.38% 50.94%,
6.08% 47.98%,
13.27% 44.94%,
25.53% 41.13%,
37.15% 37.95%,
48.16% 34.24%,
56.34% 31.69%,
62.82% 28.26%,
69.66% 24.95%,
74.71% 19.31%,
73.51% 13.67%,
69.44% 9.61%,
-0.59% 9.3%,
-0.44% -0.02%
);
}
p {
padding-top: 82px;
animation: hourglass 10s ease-in;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes hourglass {
/* remove filter to see without blur */
15% {
filter: blur(1px);
}
100% {
padding-top: 390px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment