Skip to content

Commit ce278c3

Browse files
argyleinkargyleink
authored
Glitch (#186)
* init * pink gh banner * fixes font grunge * fixes android emulator font not loading * dark mode darker * layer being given by import * adds build command and readme meta
1 parent 77157cf commit ce278c3

File tree

11 files changed

+2735
-4
lines changed

11 files changed

+2735
-4
lines changed

‎.github/workflows/main.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@ jobs:
8888

8989
- name: Build Spring Physics
9090
run: cd spring-physics && npm install && npm run build
91+
92+
- name: Build Glitch
93+
run: cd glitch && npm install && npm run build
9194

9295
- name: Deploy to Firebase
9396
uses: w9jds/firebase-action@master

‎README.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@ and expand the diversity of our skills.**
9090
21. Carousels
9191
[`Demo`](https://gui-challenges.web.app/carousel/dist/)
9292
[`YouTube`](https://www.youtube.com/watch?v=CXJv6zM003M)
93-
[`Article`](#)(coming soon)
9493
22. Crooked Grid Illusion
9594
[`Demo`](https://gui-challenges.web.app/crooked-illusion/dist/)
9695
[`YouTube`](https://www.youtube.com/watch?v=71jpjr7syc4)
@@ -102,12 +101,12 @@ and expand the diversity of our skills.**
102101
24. Transitions
103102
[`Demo`](https://gui-challenges.web.app/transitions/dist/)
104103
[`YouTube`](https://www.youtube.com/watch?v=jjtiIIjEsTw)
105-
[`Article`](#)(coming soon)
106104
25. Card Stack
107105
[`Demo`](https://gui-challenges.web.app/card-stack/dist/)
108106
[`YouTube`](https://www.youtube.com/watch?v=m4DKhRJeYx4)
109-
[`Article`](#)(coming soon)
110107
26. Spring Physics
111108
[`Demo`](https://gui-challenges.web.app/spring-physics/dist/)
112109
[`YouTube`](https://youtu.be/eamAHF71ZN4)
113-
[`Article`](#)(coming soon)
110+
27. Glitch
111+
[`Demo`](https://gui-challenges.web.app/glitch/dist/)
112+
[`YouTube`](#)(coming soon!)

‎glitch/favicon.ico

15 KB
Binary file not shown.

‎glitch/favicon.svg

Lines changed: 28 additions & 0 deletions
Loading

‎glitch/glitch.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@media (prefers-reduced-motion: no-preference) {
2+
h1 {
3+
animation:
4+
cyberpunk-glitch 7s step-end infinite,
5+
skew-glitch 7s step-end infinite;
6+
}
7+
}
8+
9+
@keyframes skew-glitch {
10+
0% { transform: skew(83deg, 2deg) scaleY(.25) }
11+
27% { transform: skew(-83deg, 2deg) scaleY(.25) }
12+
66% { transform: skew(93deg, -2deg) scaleY(.25) }
13+
91% { transform: skew(-89deg, -2deg) scaleY(.25) }
14+
1%, 28%, 67%, 92% { transform: none }
15+
}
16+
17+
/* generated! */
18+
@keyframes cyberpunk-glitch {
19+
0% { clip-path: polygon(96% 81%,23% 67%,3% 70%,81% 58%,63% 65%,71% 18%,60% 85%,22% 27%,26% 25%,60% 53%,79% 62%,61% 6%,8% 1%,12% 81%,12% 21%,75% 7%,31% 61%,69% 79%,41% 46%,3% 7%,94% 96%,16% 40%,10% 99%,22% 67%,83% 41%,92% 76%); }
20+
4% { clip-path: polygon(25% 86%,59% 45%,12% 89%,25% 14%,1% 82%,36% 13%,85% 53%,59% 8%,12% 76%,69% 93%,3% 49%,74% 64%,6% 87%,36% 94%,55% 30%,53% 16%,26% 39%,7% 69%,23% 96%,83% 38%,33% 25%,7% 36%,28% 41%,27% 85%,9% 77%,64% 47%); }
21+
27% { clip-path: polygon(39% 7%,81% 81%,97% 19%,37% 54%,19% 66%,98% 57%,10% 45%,60% 82%,10% 96%,46% 53%,70% 68%,89% 24%,6% 45%,81% 29%,68% 54%,77% 32%,90% 44%,28% 36%,66% 72%,12% 98%,83% 10%,11% 71%,71% 78%,11% 93%,50% 29%,36% 36%); }
22+
51% { clip-path: polygon(18% 34%,31% 77%,73% 57%,69% 50%,62% 33%,34% 10%,3% 66%,76% 4%,44% 97%,43% 50%,68% 3%,72% 17%,94% 57%,46% 74%,69% 17%,56% 24%,93% 59%,10% 84%,93% 76%,70% 26%,93% 2%,84% 83%,25% 4%,49% 93%,14% 64%,31% 60%); }
23+
66% { clip-path: polygon(91% 2%,50% 60%,51% 75%,11% 27%,96% 3%,36% 12%,22% 49%,21% 75%,13% 30%,29% 41%,2% 76%,72% 52%,40% 56%,19% 38%,32% 7%,30% 34%,3% 27%,48% 17%,1% 33%,16% 41%,24% 21%,47% 42%,16% 4%,81% 91%,45% 83%,21% 21%); }
24+
91% { clip-path: polygon(21% 73%,5% 5%,41% 55%,3% 59%,99% 94%,66% 86%,30% 46%,69% 100%,81% 83%,34% 55%,36% 8%,2% 5%,94% 91%,90% 71%,38% 92%,55% 46%,67% 68%,59% 98%,30% 87%,22% 45%,59% 76%,47% 6%,79% 3%,20% 61%,61% 96%,46% 18%); }
25+
26+
1%, 5%, 28%, 53%, 67%, 92% {
27+
clip-path: none;
28+
}
29+
}

‎glitch/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<title>Glitch Effect | GUI Challenges</title>
5+
<meta charset="utf-8">
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta name="mobile-web-app-capable" content="yes">
9+
<meta name="theme-color" content="Canvas">
10+
<meta name="description" content="🙂">
11+
<link rel="icon" href="/favicon.ico" sizes="any">
12+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
13+
<link rel="stylesheet" href="/style.css">
14+
<script type="module" src="/index.js"></script>
15+
</head>
16+
<body>
17+
18+
<h1 contenteditable>CYBERPINK</h1>
19+
<button>Generate</button>
20+
<pre></pre>
21+
22+
<a href="https://github.com/argyleink/gui-challenges" class="github-corner" aria-label="View source on GitHub" style="position: absolute; top: 0; border: 0; right: 0;">
23+
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
24+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" stroke="none" fill="deeppink"></path>
25+
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="Canvas" stroke="none" style="transform-origin: 130px 106px;" class="octo-arm"></path>
26+
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="Canvas" stroke="none" class="octo-body"></path>
27+
</svg>
28+
</a>
29+
30+
</body>
31+
</html>

‎glitch/index.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
function glitchyPaths() {
2+
document.querySelector('pre').textContent = `
3+
@keyframes cyberpunk-glitch {
4+
0% { clip-path: polygon(${punkyPolygons()}); }
5+
4% { clip-path: polygon(${punkyPolygons()}); }
6+
27% { clip-path: polygon(${punkyPolygons()}); }
7+
51% { clip-path: polygon(${punkyPolygons()}); }
8+
66% { clip-path: polygon(${punkyPolygons()}); }
9+
91% { clip-path: polygon(${punkyPolygons()}); }
10+
11+
1%, 5%, 28%, 53%, 67%, 92% {
12+
clip-path: none;
13+
}
14+
}
15+
`.trim()
16+
}
17+
18+
function punkyPolygons() {
19+
const collection = new Set()
20+
21+
for (let i = 0; i <= 25; i++)
22+
collection.add(`${rando()}% ${rando()}%`)
23+
24+
return Array.from(collection.values()).join(',')
25+
}
26+
27+
function rando() {
28+
return (Math.random() * 100).toFixed()
29+
}
30+
31+
glitchyPaths()
32+
document.querySelector('button').onclick = glitchyPaths

0 commit comments

Comments
 (0)