-
Notifications
You must be signed in to change notification settings - Fork 0
/
rndSVG.html
48 lines (48 loc) · 1.87 KB
/
rndSVG.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=880,maximum-scale=1,minimum-scale=.4">
<meta name="author" content="Barry Cap & Archibald Perez">
<meta name="description" content="This is a random SVG path generator. Curves are drawn in arbitrary directions, and they are filled with a random color, on a random colored background.">
<link rel="icon" href="https://barrycap.com/assets/favicon.svg"/>
<link rel="stylesheet" href="3D/3D.css">
<link rel="stylesheet" href="styles.css">
<script src="https://barrycap.com/googleanalytics.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GY5Q2KLJ19"></script>
<script async src="script.js"></script>
<title>Barry Cap › Random Path</title>
<style>
@keyframes very-long-draw {
0% { stroke-dasharray: var(--rnd-dash); stroke-dashoffset: 4096; }
100% { stroke-dasharray: var(--rnd-dash); stroke-dashoffset: 0; } }
body {
color: var(--rnd-fill);
background: var(--rnd-bgcolor);
}
svg {
max-height: 100vh;
fill: var(--rnd-fill);
stroke-width: .1px;
stroke: var(--rnd-fill);
animation: var(--rnd-time);
}
button {
color: var(--rnd-bgcolor) !important;
background: var(--rnd-fill) !important;
box-shadow: 0 0 var(--rnd-fill);
mix-blend-mode: normal !important;
}
div { padding-top: 8vw; }
noscript { position: absolute; max-height: 100%; overflow: hidden; }
</style>
</head>
<body>
<noscript><div>This page needs JavaScript to run. :)</div><a href="https://barrycap.com/">BarryCap.com</a></noscript>
<button onclick="location.reload()">Generate new path</button>
<svg viewBox="0 0 32 32">
<path id="path"/>
</svg>
<script src="rndSVG.js"></script>
</body>
</html>