Skip to content

Instantly share code, notes, and snippets.

@matt-snider
Last active April 22, 2017 13:16
Show Gist options
  • Save matt-snider/6bbdae922572843aff491579cf3bdd61 to your computer and use it in GitHub Desktop.
Save matt-snider/6bbdae922572843aff491579cf3bdd61 to your computer and use it in GitHub Desktop.
vue-guitar-chords
Display the source blob
Display the rendered blob
Raw
<svg width="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><text y="8" x="50" fill="black" font-size="10" font-weight="bold" text-anchor="middle">
G chord
</text> <text x="15" y="18" fill="black" font-size="8">
E
</text><text x="29" y="18" fill="black" font-size="8">
A
</text><text x="43" y="18" fill="black" font-size="8">
D
</text><text x="57" y="18" fill="black" font-size="8">
G
</text><text x="71" y="18" fill="black" font-size="8">
B
</text><text x="85" y="18" fill="black" font-size="8">
E
</text> <text x="2" y="24" fill="black" font-size="8">
0
</text> <svg viewBox="0 0 100 100" x="5" y="20" width="95" height="80"><line x1="0" y1="0" x2="0" y2="100" stroke="black" stroke-width="1"></line> <line x1="100" y1="0" x2="100" y2="100" stroke="black" stroke-width="1"></line> <line x1="0" y1="100" x2="100" y2="100" stroke="black" stroke-width="0.5"></line> <line x1="0" y1="0" x2="100" y2="0" stroke="black" stroke-width="3"></line> <line x1="0" y1="20" x2="100" y2="20" stroke="black" stroke-width="0.5"></line> <line x1="0" y1="40" x2="100" y2="40" stroke="black" stroke-width="0.5"></line> <line x1="0" y1="60" x2="100" y2="60" stroke="black" stroke-width="0.5"></line> <line x1="0" y1="80" x2="100" y2="80" stroke="black" stroke-width="0.5"></line> <line stroke="black" stroke-width="0.5" x1="7.5" y1="0" x2="7.5" y2="100"></line> <line stroke="black" stroke-width="0.5" x1="24.5" y1="0" x2="24.5" y2="100"></line> <line stroke="black" stroke-width="0.5" x1="41.5" y1="0" x2="41.5" y2="100"></line> <line stroke="black" stroke-width="0.5" x1="58.5" y1="0" x2="58.5" y2="100"></line> <line stroke="black" stroke-width="0.5" x1="75.5" y1="0" x2="75.5" y2="100"></line> <line stroke="black" stroke-width="0.5" x1="92.5" y1="0" x2="92.5" y2="100"></line> <svg x="2.5" y="45"><svg viewBox="0 0 100 100" width="10" height="10"><circle cx="50" cy="50" r="49" stroke="black" fill="black"></circle> <text x="50" y="65" fill="white" font-size="60" font-weight="bold" text-anchor="middle">
2
</text></svg></svg><svg x="19.5" y="25"><svg viewBox="0 0 100 100" width="10" height="10"><circle cx="50" cy="50" r="49" stroke="black" fill="black"></circle> <text x="50" y="65" fill="white" font-size="60" font-weight="bold" text-anchor="middle">
1
</text></svg></svg><svg x="70.5" y="45"><svg viewBox="0 0 100 100" width="10" height="10"><circle cx="50" cy="50" r="49" stroke="black" fill="black"></circle> <text x="50" y="65" fill="white" font-size="60" font-weight="bold" text-anchor="middle">
3
</text></svg></svg><svg x="87.5" y="45"><svg viewBox="0 0 100 100" width="10" height="10"><circle cx="50" cy="50" r="49" stroke="black" fill="black"></circle> <text x="50" y="65" fill="white" font-size="60" font-weight="bold" text-anchor="middle">
4
</text></svg></svg></svg></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment