@harmonograph/svg

👩‍🎨 Draw and animate a harmonograph in SVG

Install

npm install @harmonograph/svg

Get started

The harmonograph is a mechanical apparatus that uses pendulums to create a geometric image. This creates an SVG of a harmonograph.

Create harmonograph SVG

const generateHarmonographSVG = require('@harmonograph/svg');

const harmonograph = generateHarmonographSVG({
  size: 700,
  strokeWidth: 1,
  strokeColor: '#000',
  backgroundColor: '#444',
  pendulumTime: 150,
  pendulums: [{
    amplitude: 200, frequency: 2.985, phase: 2.054, damping: 0.001
  },
  {
    amplitude: 200, frequency: 3.006, phase: 1.820, damping: 0.008
  },
  {
    amplitude: 200, frequency: 3.003, phase: 2.283, damping: 0.001
  },
  {
    amplitude: 200, frequency: 1.994, phase: 1.155, damping: 0.001
  }]
});

This returns an SVG of a drawn harmonograph:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><rect fill="#444" width="100%" height="100%"></rect><path stroke="#000" stroke-width="1" fill="none" d="M 679.068 646.723 C 646.36 628.881, 417.218 495.899, 249.676 392.849 S -28.969 212.083, 9.448 201.383 229.928 241.52, 402.486 287.403 712.231 363.501, 699.031 350.759 524.344 287.226, 350.469 262.826 16.412 251.089, 4.27 315.364 129.74 490.425, 301.232 560.133 652.343 645.958, 689.393 576.041 615.481 354.027, 450.006 221.669 89.434 -8.64, 28.434 0.66 49.576 125.994, 205.543 266.677 567.831 557.749, 651.306 617.899 683.011 644.863, 539.811 559.696 183.558 350.442, 79.541 279.709 -3.948 196.458, 123.519 225.983 466.178 316.111, 588.361 340.053 721.459 346.467, 612.334 310.892 290.483 232.23, 152.891 243.93 -26.608 327.129, 62 417.687 356.315 606.371, 506.257 624.646 727.936 574.222, 661.594 451.855 400.89 165.032, 241.915 75.065 -16.861 -19.959, 25.981 64.799 247.753 314.759, 412.286 443.909 702.305 653.591, 683.688 641.708 505.273 531.422, 338.765 432.805 23.99 247.771, 18.19 225.929 149.785 243.301"></path></svg>

Create randomised harmonograph SVG

To create a randomised harmonograph, do not add the pendulums.

const generateHarmonographSVG = require('@harmonograph/svg');

const harmonograph = generateHarmonographSVG({
  size: 700,
  strokeWidth: 1,
  strokeColor: '#000',
  pendulumTime: 150,
});

Animate the path of the harmonograph SVG

const generateHarmonographSVG = require('@harmonograph/svg');

const harmonograph = generateHarmonographSVG({
  size: 700,
  strokeWidth: 1,
  strokeColor: '#000',
  pendulumTime: 150,
  animatePath: true
});

Animate the path of the harmonograph SVG with set duration and bezier curve

const generateHarmonographSVG = require('@harmonograph/svg');

const harmonograph = generateHarmonographSVG({
  size: 700,
  strokeWidth: 1,
  strokeColor: '#000',
  pendulumTime: 150,
  animatePath: {
    duration: '10s',
    easing: 'ease-in-out'
  }
});

Options

Option	Description	Default value	Type
size	The size of the svg	700	number
strokeWidth	The width of the line	1	number
strokeColor	The color of the line	#000	string
backgroundColor	The background color of the svg	transparent	string
pendulumTime	How long the pendulum swings in seconds	150	number
animatePath	How the path animates	false	object or boolean
animatePath.duration	The time for the animation to end	15000ms	string
animatePath.easing	The speed curve of the animation	linear	string
pendulum	Two pendulums require four items ( x, y and x, y ). Each X and Y value is an object that contains amplitude, frequency, phase, and damping ( see pendulum options below )	random values	array

Pendulums object

Parameter	Description	Default value	Type
pendulum.amplitude	How far a pendulum swings back and forth, must be from 0 - 360 degrees	random number	number
pendulum.frequency	How fast a pendulum swings back and forth, for best results use decimal values around 2 and 3	random number	number
pendulum.phase	The rate that a pendulum loses its energy, or slows down, must be from 0 to π	random number	number
pendulum.damping	The offset from the normal starting position of a pendulum, must be from 0 to 0.01	random number	number

Release History

• v0.2.0 - ✨ Remove getPathLength and use pathLength attribute
• v0.1.1 - 🎨 Replace rect fill with background color on svg style
• v0.1.0 - 📏 Add getPathLength to return the harmonograph path length
• v0.0.2 - ✋ Stop animation on last frame
• v0.0.1 - 🎨 Background color documentation
• v0.0.0 - 💥 Initial version