Skip to content

Instantly share code, notes, and snippets.

@rm-rf-etc

rm-rf-etc/index.html

Last active April 22, 2018 10:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rm-rf-etc/c5fe3b3d350b6cc1d9cd2d07db0c7e9f to your computer and use it in GitHub Desktop.
Save rm-rf-etc/c5fe3b3d350b6cc1d9cd2d07db0c7e9f to your computer and use it in GitHub Desktop.
Download ZIP
SVG sine wave
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { position: relative; }
div { position: relative; margin: auto; width: fit-content; margin-top: calc(50vh - 200px); }
</style>
</head>
<body>
<div>
<svg width="400" height="402" style="border:1px solid black" xmlns="http://www.w3.org/2000/svg">
<!--
p1: 0,0
p2: 80,0
p3: 120,400
p4: 200,400
p5: 320,0
p6: 400,0
-->
<g transform="matrix(1,0,0,-1,0,401)">
<path d="M 0 0 C 80 0, 120 400, 200 400 S 320 0, 400 0" stroke="black" fill="transparent"/>
<path d="M 0 0, 80 0" stroke="black" fill="transparent"/>
<path d="M 120 400, 280 400" stroke="black" fill="transparent"/>
<path d="M 320 0, 400 0" stroke="black" fill="transparent"/>
<circle cx="80" cy="0" r="3"/>
<circle cx="120" cy="400" r="3"/>
<circle cx="200" cy="400" r="3"/>
<circle cx="280" cy="400" r="3"/>
<circle cx="320" cy="0" r="3"/>
</g>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment