been-there-done-that

CSS Rain Effect

Looks best with a taller window/layout.

Rain drop elements animate down the screen, stem element inside animates to disappear toward the end of the drop's fall, splat element animates after the stem disappears.

JavaScript used to randomly position drop elements across the screen, slightly randomize their animation duration and delay, and also stagger their top position. Randomizing delay makes sure the drops don't fall in one sheet, randomizing duration keeps them from falling in the same constant synchronization. Staggering top position makes it so the splats don't fall in a single line.

Splatters are unfortunately disabled by default as it is rather intensive and significantly lowers framerate on most machines (in Chrome that is--FireFox and Edge are smoother actually). You can hit the splat toggle to turn it on. The effect is achieved by putting a dotted border-top on an ellipse element, and animating it from scale(0) to scale(1). You can get a better look at it by enabli

CSS Background Effect

A Pen by Osorina Irina on CodePen.

License.

Gooey Menu

Gooey menu with CSS and SVG filters. Version 1

A Pen by Lucas Bebber on CodePen.

License.

vpngate.py

This script allows to use the free VPN service provided by VPNGate in an easy way. The user just needs to provide the desidered output country, and the script automatically chooses the best server.

After this step, OpenVPN is launched with the proper configuration. The VPN can be terminated by pressing Ctrl+C.

Usage

Run the script by providing the desired output country:

	// ~/server/api/sse.ts
	export default defineEventHandler(async (event) => {
	if (!process.dev) return { disabled: true }

	// Enable SSE endpoint
	setHeader(event, 'cache-control', 'no-cache')
	setHeader(event, 'connection', 'keep-alive')
	setHeader(event, 'content-type', 'text/event-stream')
	setResponseStatus(event, 200)

	<canvas id="c"></canvas>

	<div id="info">
	<div id="top">
	<a id="close" href="">×</a>
	</div>
	<p>
	<br>- Tear the cloth with your mouse
	<br>
	<br>- Right click and drag to cut

	<div class="clock">
	<div id="h1" class="clock__digit">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>

	import json
	import typing

	from starlette.responses import Response

	class PrettyJSONResponse(Response):
	media_type = "application/json"

	def render(self, content: typing.Any) -> bytes:
	return json.dumps(