contours.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta property="og:title" content="Synth Friday: Contours">
    <meta property="og:description" content="Pretty contour lines that shape to a song.">
    <meta property="og:image" content="http://synthfriday.com/media/contours.png">
    <meta property="og:url" content="http://synthfriday.com/contours.html">
    <meta name="twitter:card" content="summary_large_image">

    <title>SYNTHFRIDAY!!!</title>
    <style type="text/css">

        body {
        	margin: 0;
        	background-color: black;
        	overflow: hidden;
        }

        audio {
        	display: hidden;
        }

        #play {
            position: absolute;
            height: 200px;
            left: 50%; 
            cursor: pointer;
            display: inline-block;
        }

        h1 {
            color: #fff;
            font-family: sans-serif;
            margin: 0;
        }

        .line {
            fill: none;
            stroke-width: 2;
        }

        .heavy {
            font: bold 200px sans-serif;
            color: #fff;
         }

    </style>
</head>
<body>
    <div id="play">
        <h1>🎹 ▶</h1>
    </div>
    <audio controls id="audioElement">
        <source src="./tracks/wee.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script type="text/javascript" src="./js/contours.js"></script>
</body>
</html>                                                                                       