<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Play a line animation</title> <style media="screen"> #sample, svg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; font-family: sans-serif; z-index: 2; } img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: 1; } path { fill: none; stroke: gray; stroke-width: 1mm; stroke-linecap: round; } path.before_in { opacity: .2; } #wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: none; } .gray { position: absolute; background: rgba(255, 255, 255, 0.7); } html, body { height: 100%; width: 100%; margin: 0; font-family: sans-serif; } input[type='range'] { position: absolute; z-index: 100; bottom: 0; left: 0; right: 0; width: 90%; } .scrubber { position: absolute; z-index: 100; bottom: 0; left: 0; right: 0; width: 90%; } </style> <link rel="stylesheet" href="assets/nouislider-15.5.0.css"> <link rel="stylesheet" href="core.css"> </head> <body> <div id='interface'> </div> <script src="assets/nouislider-15.5.0.js"></script> <script src="play.js"></script> <script src="playlist.js"></script> <script type='text/javascript'> if (location.search) { const player = new Player( document.getElementById("interface"), location.search.substring(1) ); } else { const playlist = new Playlist(document.getElementById("interface"), '/files/'); } </script> </body> </html>