Public
HTTP
Readme
Fancy animated SVGs in readmes, along with centering and image sizing.
<div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div>
<p align="center">
<img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" />
</p>
<p align="center">
<img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" />
</p>
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
const genSVG = (request: Request): string => {
let pathname = new URL(request.url).pathname;
if (pathname === "/comet.svg") {
return renderToString(
<svg version="1.1" baseProfile="full" width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle cx="80" cy="80" r="50" fill="#1b6ca8" />
<g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#0a97b0">
<animateTransform
attributeName="transform"
type="rotate"
from="360 0 0"
to="0 0 0"
dur="2s"
repeatCount="indefinite"
/>
</path>
</g>
<path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" fill="#1b6ca8" />
</svg>,
);
}
pathname === "/" && (pathname = "/hello");
// taken from https://codepen.io/dustindwayne/pen/zYXZzMd
return renderToString(
<svg width="600" height="150" xmlns="http://www.w3.org/2000/svg">
<style>
{`
html,
body {
background-color: #121212;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
text {
font-family: "sans-serif";
text-align: center;
stroke-width: 4px;
stroke-dasharray: 80;
fill: rgba(0,0,0,0);
stroke-linecap: round;
animation: follow 1.8s linear infinite;
transition: all 2.1s;
}
text:hover {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
stroke-width: 2px;
}
p {
color: #fff;
position: absolute;
bottom: 25px;
font-size: 18px;
font-family: "Poppins";
}
@keyframes follow {
0% {
stroke-dashoffset: 0;
stroke: #ff69b4;
filter: drop-shadow(0px 0px 5px #ff69b4);
}
50% {
stroke: #87ceeb;
filter: drop-shadow(0px 0px 5px #87ceeb);
}
100% {
stroke-dashoffset: 160;
stroke: #ff69b4;
filter: drop-shadow(0px 0px 5px #ff69b4);
}
}
`}
</style>
<text x="40" y="100" font-size="100">{decodeURI(pathname.slice(1, pathname.length))}</text>
</svg>,
);
};
export const reactExample = (request: Request) =>
new Response(
genSVG(request),
{
headers: {
"Content-Type": "image/svg+xml",
},
},
);
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
v35
May 16, 2024