A thick twisted rope laid across the page, its strands rolling along as it slowly turns.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ██▓╱╱▒███▓╱╱▓▓██▓╱╱▒███▓╱╱▓▓██▓╱╱▒███▓╱╱▒▓██▓╱╱▒███▓╱╱▒▓██▓╱╱▓███▓╱╱▒███▓╱╱▓▓██▓╱╱▒███▓╱╱▓▓██▓╱╱ ▒╱╱▒███▓╱╱▓▓██▒╱╱▒███▓╱╱▓▓██▒╱╱▒███▓╱╱▒███▓╱╱▓███▓╱╱▒██▓▓╱╱▓███▒╱╱▒███▓╱╱▓▓██▒╱╱▒███▓╱╱▓▓██▒╱╱▓█ ╱▒█▓▓▒╱╱▓▓█▓▒╱╱▒█▓▓▒╱╱▒▓█▓▒╱╱▒▓▓▓▒╱╱▒▓█▓▒╱╱▓▓▓▓▒╱╱▒▓█▓▒╱╱▓▓█▓▒╱╱▒█▓▓▒╱╱▒▓█▓▒╱╱▒█▓▓▒╱╱▒▓█▓▒╱╱▓▓▓▓ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Paste two lines into any page, play it in a terminal, or put a GIF in a README. The code follows the look you pick above.
<script type="module" src="https://www.ascii-magic.com/ascii/ascii.js"></script>
<ascii-art piece="rope-divider"></ascii-art>// copy rope-divider.js and kit.js into your project, then:
import { useEffect, useRef } from "react";
import create from "./rope-divider.js";
export function Piece() {
const ref = useRef(null);
useEffect(() => {
const draw = create(), t0 = performance.now();
let raf;
const tick = () => {
const f = draw((performance.now() - t0) / 1000);
ref.current.textContent = f.text ?? f;
raf = requestAnimationFrame(tick);
};
tick();
return () => cancelAnimationFrame(raf);
}, []);
return <pre ref={ref} style={{ lineHeight: 1, fontFamily: "Menlo, Consolas, monospace" }} />;
}npx --yes https://www.ascii-magic.com/ascii/cli.tgz rope-divider<!-- Download GIF below, commit it, then: -->
<p align="center">
<img src="assets/rope-divider.gif" alt="Twisted Rope, animated ASCII art" width="720">
</p>Pause on the frame you like, pick a look, then download it at an exact size.
MIT licensed. It imports one small helper file, kit.js.
/* rope-divider: a thick twisted rope whose strands roll along as it turns. */
import { Grid, palette, gradient, KEYS, fract, clamp, TAU } from "../lib/kit.js";
const ROPE = gradient(["#1e120a", "#4a2c15", "#8a5a2b", "#c48a4a", "#e9c38a", "#fff0d2"], 12);
export const meta = {
slug: "rope-divider",
name: "Twisted Rope",
category: "frames",
note: "A thick twisted rope laid across the page, its strands rolling along as it slowly turns.",
tags: ["divider", "rope", "nautical", "readme", "separator"],
cols: 96, rows: 5, fps: 20,
palette: palette(ROPE),
};
const SH = "░▒▓█";
export default function create() {
const { cols, rows } = meta;
const g = new Grid(cols, rows);
return (t) => {
g.clear();
for (let y = 0; y < rows; y++) {
const v = (y - 2) / 2.4;
const cyl = Math.sqrt(Math.max(0, 1 - v * v));
const light = 0.85 - v * 0.25; // lit from above
for (let x = 0; x < cols; x++) {
const s = fract((x + y * 2.2) / 7 - t * 0.7);
const strand = 0.5 + 0.5 * Math.cos(s * TAU);
const fib = 0.08 * Math.sin(x * 2.3 + y * 5.1);
const b = clamp(cyl * light * (0.25 + 0.75 * strand) + fib);
const k = KEYS[Math.min(11, Math.floor(b * 12))];
if (y === 0) g.set(x, y, "▄", k);
else if (y === rows - 1) g.set(x, y, "▀", KEYS[Math.min(11, Math.floor(b * 9))]);
else if (strand < 0.18) g.set(x, y, "╱", KEYS[1]);
else g.set(x, y, SH[Math.min(3, Math.floor(b * 4.5))], k);
}
}
return g.frame();
};
}
/YOUR OWN
The pieces here are hand-built animations. To turn your own photo, logo or video into animated ASCII, use the ASCII Magic editor.