Skip to content

Instantly share code, notes, and snippets.

@PM2Ring
Created May 24, 2025 20:00
Show Gist options
  • Save PM2Ring/8c865235837978243655c1b1634b3025 to your computer and use it in GitHub Desktop.
Save PM2Ring/8c865235837978243655c1b1634b3025 to your computer and use it in GitHub Desktop.
Lissajous SVG anim
Display the source blob
Display the rendered blob
Raw
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<defs style="stroke:#8a8">
<pattern id="a" width="20" height="20" patternUnits="userSpaceOnUse">
<rect width="20" height="20" style="fill:#111"/>
</pattern>
<pattern id="b" width="100" height="100" patternUnits="userSpaceOnUse"
patternTransform="scale(0.01)">
<rect width="100" height="100" style="stroke-width:2; fill:url(#a)"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#b)" id="cvs"/>
<g transform="scale(1, -1), translate(6, -6)">
<path d="M-6,0 h12 M0,-6 v12" stroke="#080" stroke-width="0.02"/>
<path style="stroke:blue; fill:none; stroke-width:0.03" d="M5,0 C5,5.236 3.537,5.236 1.5451,0
S-2.814,-5.236 -4.0451,0
S-5.2761,5.236 -4.0451,0
S-0.4468,-5.236 1.5451,0
S5,5.236 5,0
S3.537,-5.236 1.5451,0
S-2.814,5.236 -4.0451,0
S-5.2761,-5.236 -4.0451,0
S-0.4468,5.236 1.5451,0
S5,-5.236 5,0
">
<animate attributeName="d" begin="0s"
dur="10s" repeatCount="indefinite"
values="M5,0 C5,5.236 3.537,5.236 1.5451,0
S-2.814,-5.236 -4.0451,0
S-5.2761,5.236 -4.0451,0
S-0.4468,-5.236 1.5451,0
S5,5.236 5,0
S3.537,-5.236 1.5451,0
S-2.814,5.236 -4.0451,0
S-5.2761,-5.236 -4.0451,0
S-0.4468,5.236 1.5451,0
S5,-5.236 5,0
;
M4.5677,0 C3.7159,5.236 1.5603,5.236 -0.5226,0
S-4.4553,-5.236 -4.8907,0
S-4.3138,5.236 -2.5,0
S1.7892,-5.236 3.3457,0
S5.4196,5.236 4.5677,0
S1.5603,-5.236 -0.5226,0
S-4.4553,5.236 -4.8907,0
S-4.3138,-5.236 -2.5,0
S1.7892,5.236 3.3457,0
S5.4196,-5.236 4.5677,0
;
M3.3457,0 C1.7892,5.236 -0.6862,5.236 -2.5,0
S-5.3262,-5.236 -4.8907,0
S-2.6056,5.236 -0.5226,0
S3.7159,-5.236 4.5677,0
S4.9021,5.236 3.3457,0
S-0.6862,-5.236 -2.5,0
S-5.3262,5.236 -4.8907,0
S-2.6056,-5.236 -0.5226,0
S3.7159,5.236 4.5677,0
S4.9021,-5.236 3.3457,0
;
M1.5451,0 C-0.4468,5.236 -2.814,5.236 -4.0451,0
S-5.2761,-5.236 -4.0451,0
S-0.4468,5.236 1.5451,0
S5,-5.236 5,0
S3.537,5.236 1.5451,0
S-2.814,-5.236 -4.0451,0
S-5.2761,5.236 -4.0451,0
S-0.4468,-5.236 1.5451,0
S5,5.236 5,0
S3.537,-5.236 1.5451,0
;
M-0.5226,0 C-2.6056,5.236 -4.4553,5.236 -4.8907,0
S-4.3138,-5.236 -2.5,0
S1.7892,5.236 3.3457,0
S5.4196,-5.236 4.5677,0
S1.5603,5.236 -0.5226,0
S-4.4553,-5.236 -4.8907,0
S-4.3138,5.236 -2.5,0
S1.7892,-5.236 3.3457,0
S5.4196,5.236 4.5677,0
S1.5603,-5.236 -0.5226,0
;
M-2.5,0 C-4.3138,5.236 -5.3262,5.236 -4.8907,0
S-2.6056,-5.236 -0.5226,0
S3.7159,5.236 4.5677,0
S4.9021,-5.236 3.3457,0
S-0.6862,5.236 -2.5,0
S-5.3262,-5.236 -4.8907,0
S-2.6056,5.236 -0.5226,0
S3.7159,-5.236 4.5677,0
S4.9021,5.236 3.3457,0
S-0.6862,-5.236 -2.5,0
;
M-4.0451,0 C-5.2761,5.236 -5.2761,5.236 -4.0451,0
S-0.4468,-5.236 1.5451,0
S5,5.236 5,0
S3.537,-5.236 1.5451,0
S-2.814,5.236 -4.0451,0
S-5.2761,-5.236 -4.0451,0
S-0.4468,5.236 1.5451,0
S5,-5.236 5,0
S3.537,5.236 1.5451,0
S-2.814,-5.236 -4.0451,0
;
M-4.8907,0 C-5.3262,5.236 -4.3138,5.236 -2.5,0
S1.7892,-5.236 3.3457,0
S5.4196,5.236 4.5677,0
S1.5603,-5.236 -0.5226,0
S-4.4553,5.236 -4.8907,0
S-4.3138,-5.236 -2.5,0
S1.7892,5.236 3.3457,0
S5.4196,-5.236 4.5677,0
S1.5603,5.236 -0.5226,0
S-4.4553,-5.236 -4.8907,0
;
M-4.8907,0 C-4.4553,5.236 -2.6056,5.236 -0.5226,0
S3.7159,-5.236 4.5677,0
S4.9021,5.236 3.3457,0
S-0.6862,-5.236 -2.5,0
S-5.3262,5.236 -4.8907,0
S-2.6056,-5.236 -0.5226,0
S3.7159,5.236 4.5677,0
S4.9021,-5.236 3.3457,0
S-0.6862,5.236 -2.5,0
S-5.3262,-5.236 -4.8907,0
;
M-4.0451,0 C-2.814,5.236 -0.4468,5.236 1.5451,0
S5,-5.236 5,0
S3.537,5.236 1.5451,0
S-2.814,-5.236 -4.0451,0
S-5.2761,5.236 -4.0451,0
S-0.4468,-5.236 1.5451,0
S5,5.236 5,0
S3.537,-5.236 1.5451,0
S-2.814,5.236 -4.0451,0
S-5.2761,-5.236 -4.0451,0
;
M-2.5,0 C-0.6862,5.236 1.7892,5.236 3.3457,0
S5.4196,-5.236 4.5677,0
S1.5603,5.236 -0.5226,0
S-4.4553,-5.236 -4.8907,0
S-4.3138,5.236 -2.5,0
S1.7892,-5.236 3.3457,0
S5.4196,5.236 4.5677,0
S1.5603,-5.236 -0.5226,0
S-4.4553,5.236 -4.8907,0
S-4.3138,-5.236 -2.5,0
;
M-0.5226,0 C1.5603,5.236 3.7159,5.236 4.5677,0
S4.9021,-5.236 3.3457,0
S-0.6862,5.236 -2.5,0
S-5.3262,-5.236 -4.8907,0
S-2.6056,5.236 -0.5226,0
S3.7159,-5.236 4.5677,0
S4.9021,5.236 3.3457,0
S-0.6862,-5.236 -2.5,0
S-5.3262,5.236 -4.8907,0
S-2.6056,-5.236 -0.5226,0
;
M1.5451,0 C3.537,5.236 5,5.236 5,0
S3.537,-5.236 1.5451,0
S-2.814,5.236 -4.0451,0
S-5.2761,-5.236 -4.0451,0
S-0.4468,5.236 1.5451,0
S5,-5.236 5,0
S3.537,5.236 1.5451,0
S-2.814,-5.236 -4.0451,0
S-5.2761,5.236 -4.0451,0
S-0.4468,-5.236 1.5451,0
;
M3.3457,0 C4.9021,5.236 5.4196,5.236 4.5677,0
S1.5603,-5.236 -0.5226,0
S-4.4553,5.236 -4.8907,0
S-4.3138,-5.236 -2.5,0
S1.7892,5.236 3.3457,0
S5.4196,-5.236 4.5677,0
S1.5603,5.236 -0.5226,0
S-4.4553,-5.236 -4.8907,0
S-4.3138,5.236 -2.5,0
S1.7892,-5.236 3.3457,0
;
M4.5677,0 C5.4196,5.236 4.9021,5.236 3.3457,0
S-0.6862,-5.236 -2.5,0
S-5.3262,5.236 -4.8907,0
S-2.6056,-5.236 -0.5226,0
S3.7159,5.236 4.5677,0
S4.9021,-5.236 3.3457,0
S-0.6862,5.236 -2.5,0
S-5.3262,-5.236 -4.8907,0
S-2.6056,5.236 -0.5226,0
S3.7159,-5.236 4.5677,0
;
M5,0 C5,5.236 3.537,5.236 1.5451,0
S-2.814,-5.236 -4.0451,0
S-5.2761,5.236 -4.0451,0
S-0.4468,-5.236 1.5451,0
S5,5.236 5,0
S3.537,-5.236 1.5451,0
S-2.814,5.236 -4.0451,0
S-5.2761,-5.236 -4.0451,0
S-0.4468,5.236 1.5451,0
S5,-5.236 5,0
"/>
</path>
</g></svg>
@PM2Ring
Copy link
Author

PM2Ring commented May 24, 2025

10 curves, 15 frames

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment