<div class="area">
  
  <h1>
    <span>Demo of <code>user-select: all;</code></span>
    SVG Shape Cheatsheet
</h1>
  <p><span>Click line to select all, in supporting browsers.</span></p>
  <pre>&lt;line x1="0" y1="0" x2="10" y2="10" stroke="black">&lt;/line></pre>
  <pre>&lt;rect x="0" y="0" width="10" height="10">&lt;/rect></pre>
  <pre>&lt;circle cx="5" cy="5" r="5">&lt;/circle></pre>
  <pre>&lt;ellipse cx="10" cy="5" rx="10" ry="5">&lt;/ellipse></pre>
  <pre>&lt;polygon points="0,0 10,5 20,0 20,20 10,15 0,20">&lt;/polygon></pre>
  <pre>&lt;polyline points="0,0 10,5 20,0 20,20 10,15 0,20" stroke="black">&lt;/polyline></pre>
  <pre>&lt;path d="M65,10 a50,25 0 1,0 50,25">&lt;/path></pre>  
</div>

@import 'https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700';

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  font-family: 'Source Code Pro', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
}
.area {
  background: white;
  padding: 20px;
}
pre, code {
  font-family: 'Space Mono', monospace;
}
pre {
  user-select: all;
  margin: 0;
  padding: 10px 0;
  white-space: pre-wrap;
}
/* 

Probably don't do this... as the auto-selecting behavior is weird enough, a different selection color might make the user not understand what's happening at all.

pre::selection {
  background: yellow;
}
*/
p span {
  font-size: 0.8rem;
  background: #fff9c2;
  padding: 2px 5px;
}
h1 span {
  font-size: 1.0rem;
  display: block;
}
code {
  color: darkorange;
}
h1 {
  margin: 0 0 15px 0;
}
p {
  margin: 0 0 25px 0;
}