diff options
Diffstat (limited to 'playgrounds/matrix/matrix.html')
| -rw-r--r-- | playgrounds/matrix/matrix.html | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/playgrounds/matrix/matrix.html b/playgrounds/matrix/matrix.html new file mode 100644 index 0000000..cd34b7d --- /dev/null +++ b/playgrounds/matrix/matrix.html @@ -0,0 +1,47 @@ + +<!DOCTYPE html> +<html> + + <head> + <meta charset="utf-8"> + <title>SVG Playground</title> + <link rel="stylesheet" href="../playground.css"> + </head> + + <body> + + <h1>SVG Transformations</h1> + + <p> + This playground tests the <code>compose/decompose</code> functionality in + svg matrix, as well as the draggable code and the transformations. + </p> + + <svg viewBox="-200 -200 400 400"> + + <g id="tester"> + <rect class="green" width=50 height=50 /> + <line x2=50 stroke=black stroke-width=1 /> + </g> + + <g id="guess"> + <rect class="dark-pink" width=50 height=50 opacity=0.5 /> + <line x2=50 stroke=black stroke-width=1 /> + </g> + <g id="true"> + <rect class="pink" width=50 height=50 opacity=0.5 /> + <line x2=50 stroke=black stroke-width=1 /> + </g> + <ellipse id="or" class="dark-pink" rx=5 ry=5 /> + <ellipse id="b1" class="pink" cx="50" rx=5 ry=5 /> + <ellipse id="b2" class="green" cy="50" rx=5 ry=5 /> + + </svg> + + </body> + + <script src="../../dist/svg.js" charset="utf-8"></script> + <script src="drag.js" charset="utf-8"></script> + <script src="matrix.js" charset="utf-8"></script> + +</html> |