https://artbit.github.io/html5-stripe/

1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width">
6        <title>HTML5 Canvas Scrollable Background Effect: Stripe</title>
7        <style type="text/css" media="screen">
8            html, body {
9                padding: 0;
10                margin: 0;
11                overflow: hidden;
12            }
13            .fork {
14                position:fixed;
15                padding:5px 45px;
16                width:128px;
17                bottom:0px;
18                left:-50px;
19                -webkit-transform:rotate(45deg);
20                -moz-transform:rotate(45deg);
21                -ms-transform:rotate(45deg);
22                transform:rotate(45deg);
23                box-shadow:0 0 0 3px #aaaaaa, 0 0 20px -3px rgba(0, 0, 0, 0.5);
24                text-shadow:0 0 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.3);
25                background-color:#aaaaaa;
26                color:#ffffff;
27                font-size:13px;
28                font-family:sans-serif;
29                text-decoration:none;
30                font-weight:bold;
31                border:2px dotted #ffffff;
32                -webkit-backface-visibility:hidden;
33                letter-spacing:.5px;
34            }
35            .buy-me {
36                display: flex;
37                align-items: center;
38                justify-content: center;
39            }
40            .coffee {
41                position:absolute;
42                bottom: 12px;
43            }
44        </style>
45        <!-- Global site tag (gtag.js) - Google Analytics -->

45
46        <script async src="https://www.googletagmanager.com/gtag/js?id=

46UA-170132767-1

46"></script>
47        

47<script>
48            

48window.dataLayer = window.dataLayer || [];
49            function gtag(){dataLayer.push(arguments);}
50            gtag('js', new Date());
51            gtag('config', '

51UA-170132767-1

51');
52        

52</script>

52
53        

53<script src="./bundle.js?8"></script>

53
54    </head>
55    <body>
56        <canvas id="stage"></canvas>
57        <a href='https://github.com/ArtBIT/html5-stripe' class="fork">Fork me on GitHub</a>
58
59        <div class="buy-me">
60        <a href="https://www.buymeacoffee.com/artbit" class="coffee">
61          <img
62            src="https://cdn.buymeacoffee.com/buttons/default-green.png"
63            height="30"
64            alt="Buy Me A Coffee"
65          />
66        </a>
67        </div>
68        

68<script charset="utf-8">
69            const stage = document.getElementById('stage');
70            stage.width = window.innerWidth;
71            stage.height = window.innerHeight;
72            const app = new App('#stage', {stripeWidth: stage.width < 800 ? 30: 80, stripePadding: stage.width < 800 ? 70 : 130}); 
73            app.start();
74        </script>

74
75    </body>
76</html>