The "Apple Siri" wave replicated in pure Javascript using the Canvas API.

Read blog post here

Demo

<script src="https://unpkg.com/siriwave/dist/siriwave.umd.min.js"></script>

Install it through npm install siriwave or yarn add siriwave first:

import SiriWave from "siriwave";

Create a div container and instantiate a SiriWave object

<div id="siri-container"></div>
<script>
  var siriWave = new SiriWave({
    container: document.getElementById("siri-container"),
    width: 640,
    height: 200,
  });
</script>

Start the animation

Stop the animation.

Set the new value of speed (animated)

Set the new value of amplitude (animated)

• GCX default
• GCX iOS 9

If you wanna make some modifications in your local environment, use:

yarn dev

this will create a watchable build with RollupJS and automatically create a server to see your changes in the browser.

To finally build all targets:

yarn build

You can find an excellent demo here by @semmel