JSFiddle - React, Tailwind, and code Playground

by Matthew Schenker

HTML

<script src="https://unpkg.com/osr-emu/dist/osr-emu.dist.min.js"></script>
<script src="https://unpkg.com/ayvajs/dist/ayva.dist.min.js"></script>
<script src="https://ayvajs.github.io/ayvajs-docs/ayva-codepen-setup.js"></script>

JavaScript

ayva.do(new ClassicStroke({
  // Random bottom
  bottom: () => Ayva.map(Math.random(), 0, 1, 0, 0.3),

  // Random top
  top: () => Ayva.map(Math.random(), 0, 1, 0.7, 1),

  // Speed vary by sin
  speed: (index) => {
    const x = index / 20; // One cycle every 20 strokes.

    const minSpeed = 0.5;
    const maxSpeed = 3;
    return Ayva.map(Math.sin(x * Math.PI * 2), -1, 1, minSpeed, maxSpeed);
  },

  // "Bouncy" motion by using parabolic ramps
  shape: [ Ayva.RAMP_NEGATIVE_PARABOLIC, Ayva.RAMP_PARABOLIC ],

  // Make up strokes perform at half speed.
  relativeSpeeds: [0.5, 1],

  // With some twist motion slightly out of phase.
  twist: {
    from: 0.25,
    to: 0.75,
    phase: 0.5
  }  
}));