SVG test

Finding sharp edges in SVG shapes

by Grzegorz Matyszewski

HTML

<h1>Finding sharp edges in SVG shapes</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="20" viewBox="0 0 160 20">
    <circle fill="none" stroke="#191919" cx="10" cy="10" r="8"></circle>
    <circle fill="none" stroke="#191919" cx="28.5" cy="10.5" r="8"></circle>
    <circle fill="none" stroke="#191919" cx="46.5" cy="10.5" r="7.5"></circle>
    <circle fill="none" stroke="#191919" cx="64" cy="10" r="7.5"></circle>
    <line x1="74" y1="3" x2="100" y2="3" stroke="#191919"/>
    <line x1="74" y1="10.5" x2="100" y2="10.5" stroke="#191919"/>
    <line x1="74.5" y1="17.5" x2="99.5" y2="17.5" stroke="#191919"/>
    <line x1="102.5" y1="2.5" x2="122.5" y2="22.5" stroke="#191919"/>
    <line x1="122" y1="22" x2="142" y2="2" stroke="#191919"/>
</svg>
<h2>Description:</h2>
<ol>
    <li><strong>circle:</strong> radius even, center point even</li>
    <li><strong>circle:</strong> radius even, center point odd</li>
    <li><strong>circle:</strong> radius odd, center point odd</li>
    <li><strong>circle:</strong> radius odd, center point even</li>
    <li><strong>horizontal line:</strong> all points even</li>
    <li><strong>horizontal line:</strong> y even, x odd</li>
    <li><strong>horizontal line:</strong> all points odd</li>
    <li><strong>diagonal line:</strong> all points odd</li>
    <li><strong>diagonal line:</strong> all points even</li>
</ol>

CSS

body {
  background: #fff;
}