78 lines
1.9 KiB
XML
78 lines
1.9 KiB
XML
{% import "macros.xml" as macros %}
|
|
<svg viewBox="0 0 532 276"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
<title>{{ title | safe }}</title>
|
|
<desc>{{ description | safe }}</desc>
|
|
|
|
{{ macros::metadata() }}
|
|
|
|
<defs>
|
|
<linearGradient id="pong-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop id="pong-gradiant-begin" offset="0%" />
|
|
<stop id="pong-gradiant-end" offset="100%" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<rect id="pong-boarder" width="100%" height="100%" />
|
|
|
|
<svg x="10" y="10" width="512" height="256" >
|
|
<rect id="pong-board" width="100%" height="100%" />
|
|
|
|
<path id="pong-ball-path" d="M256 128" />
|
|
<path id="pong-collision-path" d="M256 128" />
|
|
|
|
<line id="pong-center-line" x1="256" y1="0" x2="256" y2="256" />
|
|
|
|
<rect id="pong-player-paddle" width="2" height="28" transform="translate(0, 114)"/>
|
|
<rect id="pong-ai-paddle" width="2" height="28" transform="translate(510, 114)"/>
|
|
|
|
<text id="pong-player-score" class="pong-score" x="85.33" y="64">0</text>
|
|
<text id="pong-ai-score" class="pong-score" x="426.66" y="64">0</text>
|
|
|
|
<circle id="pong-ball" r="3">
|
|
<animateMotion id="pong-ball-animation" dur="1.0s" repeatCount="indefinite">
|
|
<mpath xlink:href="#pong-ball-path"/>
|
|
</animateMotion>
|
|
</circle>
|
|
</svg>
|
|
|
|
<style>
|
|
#pong-gradiant-begin {
|
|
stop-color:blue;
|
|
stop-opacity:1;
|
|
}
|
|
#pong-gradiant-end {
|
|
stop-color:red;
|
|
stop-opacity:1;
|
|
}
|
|
#pong-boarder {
|
|
fill:url(#pong-gradient);
|
|
}
|
|
#pong-board {
|
|
fill:black;
|
|
}
|
|
#pong-ball-path {
|
|
stroke:blue;
|
|
}
|
|
#pong-collision-path {
|
|
stroke:red;
|
|
stroke-dasharray:1;
|
|
}
|
|
#pong-center-line {
|
|
stroke:white;
|
|
stroke-dasharray:5;
|
|
stroke-width:2;
|
|
}
|
|
#pong-ai-paddle,#pong-player-paddle,.pong-score {
|
|
fill:white;
|
|
}
|
|
.pong-score {
|
|
font-family:'Courier New',Courier,monospace;font-size:2em;
|
|
}
|
|
#pong-ball {
|
|
fill:white;
|
|
}
|
|
</style>
|
|
</svg> |
