Skip to content

Instantly share code, notes, and snippets.

@paulbjensen

paulbjensen/football.html

Created January 7, 2018 19:17
Show Gist options
  • Save paulbjensen/40af2a72ff2b89309aa23a9e84de5514 to your computer and use it in GitHub Desktop.
Save paulbjensen/40af2a72ff2b89309aa23a9e84de5514 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
football.html
<html>
<head>
<title>Football</title>
</head>
<body>
<svg viewBox="0 0 1100 600" xmlns="http://www.w3.org/2000/svg">
<rect id="pitch" x="0" y="0" width="1100" height="600" fill="green"></rect>
<g id="lines">
<rect x="50" y="50" width="1000" height="500" fill="none" stroke="white" stroke-width="1"></rect>
<g id="left-end">
<rect x="50" y="225" width="50" height="150" fill="none" stroke="white" stroke-width="1"></rect>
<circle cx="150" cy="300" r="1" fill="white" stroke="white" stroke-width="1"></circle>
<rect x="50" y="150" width="150" height="300" fill="none" stroke="white" stroke-width="1"></rect>
<path d="M200,350 a1,1 0 0,0 0,-100" fill="none" stroke="white" stroke-width="1" />
</g>
<g id="halfway">
<circle cx="550" cy="300" r="100" fill="none" stroke="white" stroke-width="1"></circle>
<circle cx="550" cy="300" r="1" fill="white" stroke="white" stroke-width="1"></circle>
<line x1="550" x2="550" y1="50" y2="550" stroke="white" stroke-width="1"></line>
</g>
<g id="right-end">
<rect x="1000" y="225" width="50" height="150" fill="none" stroke="white" stroke-width="1"></rect>
<circle cx="950" cy="300" r="1" fill="white" stroke="white" stroke-width="1"></circle>
<rect x="900" y="150" width="150" height="300" fill="none" stroke="white" stroke-width="1"></rect>
<path d="M900,250 a1,1 0 0,0 0,100" fill="none" stroke="white" stroke-width="1" />
</g>
<g id="corners">
<path id="top-left" d="M50,57 a7,7 0 0,0 7,-7" fill="none" stroke="white" stroke-width="1" />
<path id="top-right" d="M1043,50 a7,7 0 0,0 7,7" fill="none" stroke="white" stroke-width="1" />
<path id="bottom-left" d="M57,550 a7,7 0 0,0 -7,-7" fill="none" stroke="white" stroke-width="1" />
<path id="bottom-right" d="M1050,543 a7,7 0 0,0 -7,7" fill="none" stroke="white" stroke-width="1" />
</g>
<g id="goals">
<rect id="left-goal" x="25" y="250" width="25" height="100" fill="rgba(255,255,255,0.5)" stroke="white" stroke-width="1"></rect>
<rect id="right-goal" x="1050" y="250" width="25" height="100" fill="rgba(255,255,255,0.5)" stroke="white" stroke-width="1"></rect>
</g>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment