Get Started | Notion

Step 1: Create a scene file

Open any folder on your device in Visual Studio Code. Create a file called “scene.pinsandcurves.xml” and paste the template below:

<pins-and-curves>
    <constant key="projectName" value="example project"></constant>
    <scene
        width="500"
        height="500"
    >
        <circle r="50"></circle>
    </scene>
</pins-and-curves>

Step 2: Launch directly from Visual Studio Code.

Step 1: Create an HTML File with your scene

Open a code editor of your choice (e.g. Visual Studio Code - which is powerful, easy and free), and copy the template below. Save the file as index.html anywhere on your computer.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first Pins And Curves Scene</title>
    <link rel="stylesheet" href="<https://storage.googleapis.com/pinsandcurvesservice/svgserverstylesheet.css>">
</head>

<body>
    <svg viewBox="0 0 1920 1080" xmlns="<http://www.w3.org/2000/svg>">
				    <!-- Your scene elements go here -->
            <rect id="rect" x="0" y="0" width="1920" height="1080" stroke="black" stroke-width="3" fill="#c2ffc2" />
            <ellipse id="shadow" cx="960" cy="640" rx="100" ry="20" fill="#000000" fill-opacity="0.5" style="mix-blend-mode:overlay" />
            <circle id="ball" cx="960" cy="540" r="100" fill="#ea1a65" />
    </svg>
    
    <script src="<https://storage.googleapis.com/pinsandcurvesservice/PinsAndCurvesServerV3.umd.js>"></script> 
    <script>
		    // you can configure your scene here:
        const host = PinsAndCurves.SVGServer.Init({
            framesPerSecond: 30,
            numberOfFrames: 250,
        },true);
    </script>
</body>

</html>

Step 2: Run a simple Web Server to open Pins And Curves

// TODO

Trick (Optional): Convert your image sequence to mp4 using ffmpeg

Here’s a handy little command you can use to generate mp4 videos from your image sequences.

ffmpeg -framerate 30 -i frame_%05d.png -c:v libx264 -crf 1 -vf scale=1920:1080 -pix_fmt yuv420p -vb 100M out.mp4