Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <div class="wrapper">
    <div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" role="img" x="0px" y="0px" viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve">
        <title>The first little pig built a house out of straw.</title>
        <text class="visually-hidden">Sadly, he was eaten by the big, bad wolf.</text>
        <g>
          <path class="pig1" d="M215.722,449.787h-33.151c0,0-17.525-38.274-25.72-90.584c15.508,6.781,32.443,11.811,50.363,14.732   v0.012C210.367,412.905,215.722,449.787,215.722,449.787z" />
          <path class="pig1" d="M414.09,449.787H380.94c0,0-15.498-33.823-24.155-81.345c17.665-2.91,33.533-6.398,47.662-10.142   C407.205,402.392,414.09,449.787,414.09,449.787z" />
        </g>
        <path class="pig1" d="M127.213,342.999c-1.646,48.3,10.421,106.788,10.421,106.788h-33.151  c0,0-47.384-107.066-39.723-213.275c6.41-88.822,78.124-146.545,179.325-140.401c36.442,2.214,73,15.59,104.655,35.491  c11.811-21.095,30.101-41.936,57.155-45.738c0,0,17.456,55.474-11.197,82.713c14.35,14.721,22.892,19.369,36.801,51.476  c13.921,32.107,69.743,46.596,69.743,46.596l-6.955,54.478c0,0-28.526,20.956-89.841,37.172  c-14.129,3.744-29.997,7.232-47.662,10.142c-9.307,1.541-19.114,2.921-29.418,4.104c3.141,39.468,8.623,77.243,8.623,77.243h-33.151  c0,0-14.037-30.647-22.857-74.554l-2.051,0.417c-11.938,0.973-21.745,1.264-33.846,1.264c-12.634,0-24.967-1.02-36.871-2.978  c-17.92-2.921-34.854-7.951-50.363-14.732C146.269,354.59,136.347,349.154,127.213,342.999z" />
        <path d="M243.431,106.849c0.224,0.014,0.445,0.02,0.665,0.02c5.642,0,10.378-4.395,10.726-10.102  c0.361-5.93-4.152-11.029-10.082-11.391c-1.511-0.093-3.015-0.17-4.512-0.234c-5.926-0.301-10.954,4.347-11.21,10.282  c-0.256,5.935,4.348,10.954,10.282,11.21C240.671,106.693,242.048,106.764,243.431,106.849z" />
        <path d="M369.048,254.676c0-3.068,2.501-5.563,5.576-5.563c3.069,0,5.564,2.495,5.564,5.563c0,5.94,4.817,10.756,10.756,10.756  s10.756-4.817,10.756-10.756c0-14.93-12.147-27.076-27.077-27.076c-14.937,0-27.089,12.146-27.089,27.076  c0,5.94,4.817,10.756,10.756,10.756C364.231,265.432,369.048,260.616,369.048,254.676z" />
        <path d="M13.149,108.667c-5.791-1.323-11.558,2.306-12.877,8.097c-1.32,5.791,2.305,11.557,8.097,12.877  c8.141,1.855,15.875,2.784,23.147,2.784c2.983,0,5.884-0.162,8.706-0.474c7.515,16.476,18.24,31.282,30.23,41.817  c-9.226,18.669-14.801,39.537-16.42,61.971c-7.765,107.645,38.635,213.93,40.614,218.401c1.723,3.893,5.579,6.403,9.837,6.403h33.15  c3.233,0,6.296-1.455,8.337-3.963c2.043-2.506,2.849-5.8,2.196-8.966c-0.103-0.497-8.929-43.823-10.199-85.626  c3.016,1.613,6.085,3.157,9.205,4.625c8.635,50.177,24.904,86.092,25.618,87.65c1.751,3.826,5.573,6.278,9.78,6.278h33.151  c3.123,0,6.091-1.357,8.134-3.718c2.043-2.36,2.959-5.493,2.51-8.582c-0.047-0.323-4.174-28.907-7.267-61.871  c8.247,0.86,16.605,1.299,24.985,1.299c10.413,0,18.826-0.23,27.394-0.769c8.907,39.432,21.03,66.162,21.58,67.364  c1.752,3.825,5.573,6.277,9.78,6.277h33.15c3.121,0,6.09-1.357,8.134-3.717c2.043-2.361,2.96-5.493,2.512-8.583  c-0.049-0.341-4.548-31.508-7.675-66.297c3.114-0.41,6.201-0.84,9.261-1.29c8.958,42.792,22.331,72.285,22.94,73.612  c1.752,3.825,5.573,6.276,9.779,6.276h33.15c3.123,0,6.091-1.357,8.135-3.718c2.044-2.361,2.959-5.493,2.511-8.583  c-0.063-0.438-5.973-41.375-8.959-81.907c56.692-16.156,83.707-35.675,84.881-36.539c2.373-1.744,3.927-4.384,4.301-7.306  l6.955-54.477c0.684-5.363-2.728-10.403-7.959-11.771c-14.129-3.696-52.917-18.167-62.585-40.462  c-12.284-28.354-21.046-37.115-32.018-47.816c22.961-32.642,7.535-83.01,6.805-85.327c-1.579-5.013-6.552-8.158-11.758-7.422  c-22.988,3.231-43.313,17.575-59.274,41.673c-20.115-11.551-41.06-20.122-62.402-25.514c-5.758-1.455-11.608,2.034-13.063,7.794  c-1.455,5.759,2.035,11.608,7.794,13.063c19.176,4.845,38.731,12.876,57.082,23.394c-10.443,21.636-14.552,40.989-14.745,41.913  c-1.211,5.816,2.521,11.512,8.337,12.724c0.74,0.155,1.477,0.228,2.204,0.228c4.989,0,9.462-3.489,10.52-8.565  c0.047-0.226,4.844-22.822,17.249-45.018c0.045-0.08,0.094-0.157,0.137-0.238c11.188-19.91,24.505-32.606,39.692-37.868  c3.033,15.565,6.199,45.975-10.641,61.984c-0.015,0.015-0.028,0.031-0.044,0.045c-0.017,0.017-0.037,0.031-0.054,0.047  c-0.123,0.119-0.23,0.248-0.346,0.373c-0.119,0.127-0.243,0.252-0.355,0.383c-0.124,0.145-0.233,0.298-0.347,0.449  c-0.103,0.136-0.213,0.269-0.309,0.409c-0.109,0.157-0.202,0.321-0.302,0.482c-0.086,0.141-0.177,0.279-0.257,0.422  c-0.094,0.169-0.172,0.343-0.256,0.515c-0.069,0.143-0.143,0.283-0.205,0.428c-0.076,0.177-0.138,0.359-0.204,0.54  c-0.054,0.146-0.112,0.29-0.159,0.438c-0.058,0.184-0.102,0.37-0.151,0.556c-0.039,0.148-0.083,0.296-0.115,0.446  c-0.04,0.185-0.066,0.372-0.096,0.56c-0.025,0.154-0.055,0.308-0.073,0.463c-0.021,0.183-0.029,0.367-0.04,0.551  c-0.011,0.16-0.026,0.319-0.029,0.481c-0.003,0.18,0.006,0.359,0.012,0.539c0.005,0.165,0.004,0.329,0.017,0.494  c0.013,0.175,0.04,0.35,0.062,0.525c0.022,0.168,0.037,0.336,0.066,0.502c0.03,0.171,0.073,0.34,0.111,0.51  c0.038,0.168,0.07,0.337,0.116,0.503c0.046,0.168,0.105,0.331,0.159,0.496c0.054,0.166,0.103,0.331,0.166,0.495  c0.062,0.165,0.139,0.324,0.211,0.485c0.07,0.159,0.136,0.321,0.214,0.477c0.081,0.161,0.175,0.318,0.266,0.476  c0.085,0.15,0.165,0.302,0.257,0.449c0.101,0.159,0.215,0.312,0.326,0.468c0.098,0.138,0.19,0.279,0.296,0.413  c0.12,0.154,0.254,0.299,0.384,0.447c0.099,0.113,0.188,0.231,0.293,0.341c0.015,0.015,0.031,0.028,0.046,0.044  c0.017,0.017,0.03,0.037,0.047,0.054c2.473,2.535,4.721,4.728,6.896,6.847c10.223,9.967,16.976,16.551,27.739,41.398  c12.257,28.267,50.162,43.989,67.794,49.942l-5.183,40.606c-9.186,5.734-35.769,20.57-81.874,32.84  c-0.435,0.086-0.858,0.2-1.272,0.337c-14.661,3.864-30.151,7.152-46.069,9.774c-9.312,1.542-19.03,2.898-28.885,4.028  c-0.114,0.013-0.224,0.04-0.337,0.056c-0.195,0.028-0.387,0.057-0.578,0.096c-0.166,0.033-0.328,0.074-0.492,0.115  c-0.185,0.046-0.37,0.094-0.552,0.151c-0.164,0.051-0.323,0.108-0.482,0.166c-0.172,0.062-0.344,0.125-0.512,0.196  c-0.16,0.068-0.316,0.142-0.472,0.217c-0.158,0.076-0.316,0.153-0.47,0.236c-0.156,0.085-0.307,0.175-0.458,0.268  c-0.145,0.089-0.289,0.177-0.43,0.271c-0.148,0.1-0.291,0.207-0.435,0.314c-0.133,0.1-0.267,0.201-0.395,0.307  c-0.138,0.114-0.27,0.232-0.401,0.353c-0.124,0.113-0.246,0.225-0.365,0.343c-0.125,0.125-0.243,0.254-0.361,0.384  c-0.114,0.126-0.226,0.251-0.333,0.382c-0.11,0.133-0.214,0.271-0.317,0.41c-0.103,0.138-0.204,0.275-0.301,0.418  c-0.096,0.141-0.184,0.286-0.272,0.431c-0.091,0.151-0.181,0.3-0.265,0.454c-0.081,0.148-0.154,0.3-0.227,0.452  c-0.077,0.159-0.153,0.319-0.223,0.483c-0.067,0.156-0.125,0.315-0.184,0.475c-0.061,0.166-0.122,0.332-0.174,0.501  c-0.052,0.166-0.096,0.333-0.14,0.501c-0.044,0.17-0.088,0.34-0.124,0.513c-0.037,0.174-0.065,0.351-0.091,0.527  c-0.027,0.173-0.054,0.346-0.072,0.522c-0.019,0.18-0.029,0.362-0.04,0.545c-0.01,0.177-0.019,0.355-0.019,0.535  c-0.001,0.181,0.008,0.364,0.016,0.546c0.005,0.123,0.001,0.245,0.011,0.369c2.056,25.835,5.137,51.165,7.028,65.633h-13.691  c-4.367-10.878-13.224-35.016-19.399-65.642c-0.871-5.066-5.286-8.916-10.6-8.916c-1.105,0-2.17,0.168-3.173,0.478  c-10.728,0.869-19.931,1.209-32.725,1.209c-11.872,0-23.688-0.954-35.141-2.84c-16.747-2.729-32.824-7.429-47.794-13.976  c-9.911-4.321-19.306-9.456-27.948-15.278c-2.082-1.395-4.186-2.884-6.254-4.423c-4.767-3.545-11.504-2.559-15.051,2.207  c-3.546,4.766-2.559,11.504,2.206,15.051c0.738,0.549,1.483,1.08,2.228,1.616c-0.44,34.193,5.047,71.375,8.361,90.515h-13.017  c-9.719-24.339-42.511-114.051-36.185-201.744c1.619-22.43,7.639-42.686,17.461-60.194c0.01-0.014,0.022-0.026,0.031-0.04  c0.359-0.516,0.656-1.056,0.913-1.607c22.059-38.005,62.312-62.705,114.521-67.982c5.911-0.598,10.218-5.873,9.62-11.783  c-0.597-5.909-5.871-10.215-11.783-9.619c-42.495,4.295-79.21,20.498-106.175,46.858c-6.896,6.741-13.062,14.062-18.48,21.894  c-7.846-7.634-14.947-17.648-20.405-28.82C81.571,115.9,90.75,95.674,89.107,78.361c-1.449-15.274-11.317-26.056-24.554-26.829  c-15.014-0.888-23.328,5.982-27.675,11.892c-7.94,10.799-9.326,27.685-4.19,47.464C26.725,110.999,20.2,110.274,13.149,108.667z   M388.083,439.031c-4.184-10.424-12.49-33.038-18.618-61.896c8.545-1.584,16.952-3.351,25.156-5.29  c2.064,26.425,5.225,52.449,7.152,67.186H388.083z M189.711,439.031c-4.23-10.528-12.67-33.515-18.834-62.961  c8.546,2.833,17.339,5.154,26.316,6.957c1.99,22.356,4.557,43.341,6.212,56.003H189.711z M54.214,76.165  c1.114-1.516,3.003-3.202,7.765-3.202c0.417,0,0.857,0.014,1.32,0.041c3.611,0.211,4.326,6.653,4.395,7.385  c0.697,7.342-2.802,18.712-14.133,25.304C49.771,91.181,50.885,80.693,54.214,76.165z" />

      </svg>
      <h2>Good</h2><code>role="img" +<br>&lt;title&gt; + &lt;text&gt; +<br>visually hidden CSS</code>
    </div>
    <div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" role="img" x="0px" y="0px" viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve">
        <title>The second little pig built a house out of sticks.</title>
        <desc>Sadly, he too was eaten by the big, bad wolf.</desc>
        <g>
          <path class="pig2" d="M215.722,449.787h-33.151c0,0-17.525-38.274-25.72-90.584c15.508,6.781,32.443,11.811,50.363,14.732   v0.012C210.367,412.905,215.722,449.787,215.722,449.787z" />
          <path class="pig2" d="M414.09,449.787H380.94c0,0-15.498-33.823-24.155-81.345c17.665-2.91,33.533-6.398,47.662-10.142   C407.205,402.392,414.09,449.787,414.09,449.787z" />
        </g>
        <path class="pig2" d="M127.213,342.999c-1.646,48.3,10.421,106.788,10.421,106.788h-33.151  c0,0-47.384-107.066-39.723-213.275c6.41-88.822,78.124-146.545,179.325-140.401c36.442,2.214,73,15.59,104.655,35.491  c11.811-21.095,30.101-41.936,57.155-45.738c0,0,17.456,55.474-11.197,82.713c14.35,14.721,22.892,19.369,36.801,51.476  c13.921,32.107,69.743,46.596,69.743,46.596l-6.955,54.478c0,0-28.526,20.956-89.841,37.172  c-14.129,3.744-29.997,7.232-47.662,10.142c-9.307,1.541-19.114,2.921-29.418,4.104c3.141,39.468,8.623,77.243,8.623,77.243h-33.151  c0,0-14.037-30.647-22.857-74.554l-2.051,0.417c-11.938,0.973-21.745,1.264-33.846,1.264c-12.634,0-24.967-1.02-36.871-2.978  c-17.92-2.921-34.854-7.951-50.363-14.732C146.269,354.59,136.347,349.154,127.213,342.999z" />
        <path d="M243.431,106.849c0.224,0.014,0.445,0.02,0.665,0.02c5.642,0,10.378-4.395,10.726-10.102  c0.361-5.93-4.152-11.029-10.082-11.391c-1.511-0.093-3.015-0.17-4.512-0.234c-5.926-0.301-10.954,4.347-11.21,10.282  c-0.256,5.935,4.348,10.954,10.282,11.21C240.671,106.693,242.048,106.764,243.431,106.849z" />
        <path d="M369.048,254.676c0-3.068,2.501-5.563,5.576-5.563c3.069,0,5.564,2.495,5.564,5.563c0,5.94,4.817,10.756,10.756,10.756  s10.756-4.817,10.756-10.756c0-14.93-12.147-27.076-27.077-27.076c-14.937,0-27.089,12.146-27.089,27.076  c0,5.94,4.817,10.756,10.756,10.756C364.231,265.432,369.048,260.616,369.048,254.676z" />
        <path d="M13.149,108.667c-5.791-1.323-11.558,2.306-12.877,8.097c-1.32,5.791,2.305,11.557,8.097,12.877  c8.141,1.855,15.875,2.784,23.147,2.784c2.983,0,5.884-0.162,8.706-0.474c7.515,16.476,18.24,31.282,30.23,41.817  c-9.226,18.669-14.801,39.537-16.42,61.971c-7.765,107.645,38.635,213.93,40.614,218.401c1.723,3.893,5.579,6.403,9.837,6.403h33.15  c3.233,0,6.296-1.455,8.337-3.963c2.043-2.506,2.849-5.8,2.196-8.966c-0.103-0.497-8.929-43.823-10.199-85.626  c3.016,1.613,6.085,3.157,9.205,4.625c8.635,50.177,24.904,86.092,25.618,87.65c1.751,3.826,5.573,6.278,9.78,6.278h33.151  c3.123,0,6.091-1.357,8.134-3.718c2.043-2.36,2.959-5.493,2.51-8.582c-0.047-0.323-4.174-28.907-7.267-61.871  c8.247,0.86,16.605,1.299,24.985,1.299c10.413,0,18.826-0.23,27.394-0.769c8.907,39.432,21.03,66.162,21.58,67.364  c1.752,3.825,5.573,6.277,9.78,6.277h33.15c3.121,0,6.09-1.357,8.134-3.717c2.043-2.361,2.96-5.493,2.512-8.583  c-0.049-0.341-4.548-31.508-7.675-66.297c3.114-0.41,6.201-0.84,9.261-1.29c8.958,42.792,22.331,72.285,22.94,73.612  c1.752,3.825,5.573,6.276,9.779,6.276h33.15c3.123,0,6.091-1.357,8.135-3.718c2.044-2.361,2.959-5.493,2.511-8.583  c-0.063-0.438-5.973-41.375-8.959-81.907c56.692-16.156,83.707-35.675,84.881-36.539c2.373-1.744,3.927-4.384,4.301-7.306  l6.955-54.477c0.684-5.363-2.728-10.403-7.959-11.771c-14.129-3.696-52.917-18.167-62.585-40.462  c-12.284-28.354-21.046-37.115-32.018-47.816c22.961-32.642,7.535-83.01,6.805-85.327c-1.579-5.013-6.552-8.158-11.758-7.422  c-22.988,3.231-43.313,17.575-59.274,41.673c-20.115-11.551-41.06-20.122-62.402-25.514c-5.758-1.455-11.608,2.034-13.063,7.794  c-1.455,5.759,2.035,11.608,7.794,13.063c19.176,4.845,38.731,12.876,57.082,23.394c-10.443,21.636-14.552,40.989-14.745,41.913  c-1.211,5.816,2.521,11.512,8.337,12.724c0.74,0.155,1.477,0.228,2.204,0.228c4.989,0,9.462-3.489,10.52-8.565  c0.047-0.226,4.844-22.822,17.249-45.018c0.045-0.08,0.094-0.157,0.137-0.238c11.188-19.91,24.505-32.606,39.692-37.868  c3.033,15.565,6.199,45.975-10.641,61.984c-0.015,0.015-0.028,0.031-0.044,0.045c-0.017,0.017-0.037,0.031-0.054,0.047  c-0.123,0.119-0.23,0.248-0.346,0.373c-0.119,0.127-0.243,0.252-0.355,0.383c-0.124,0.145-0.233,0.298-0.347,0.449  c-0.103,0.136-0.213,0.269-0.309,0.409c-0.109,0.157-0.202,0.321-0.302,0.482c-0.086,0.141-0.177,0.279-0.257,0.422  c-0.094,0.169-0.172,0.343-0.256,0.515c-0.069,0.143-0.143,0.283-0.205,0.428c-0.076,0.177-0.138,0.359-0.204,0.54  c-0.054,0.146-0.112,0.29-0.159,0.438c-0.058,0.184-0.102,0.37-0.151,0.556c-0.039,0.148-0.083,0.296-0.115,0.446  c-0.04,0.185-0.066,0.372-0.096,0.56c-0.025,0.154-0.055,0.308-0.073,0.463c-0.021,0.183-0.029,0.367-0.04,0.551  c-0.011,0.16-0.026,0.319-0.029,0.481c-0.003,0.18,0.006,0.359,0.012,0.539c0.005,0.165,0.004,0.329,0.017,0.494  c0.013,0.175,0.04,0.35,0.062,0.525c0.022,0.168,0.037,0.336,0.066,0.502c0.03,0.171,0.073,0.34,0.111,0.51  c0.038,0.168,0.07,0.337,0.116,0.503c0.046,0.168,0.105,0.331,0.159,0.496c0.054,0.166,0.103,0.331,0.166,0.495  c0.062,0.165,0.139,0.324,0.211,0.485c0.07,0.159,0.136,0.321,0.214,0.477c0.081,0.161,0.175,0.318,0.266,0.476  c0.085,0.15,0.165,0.302,0.257,0.449c0.101,0.159,0.215,0.312,0.326,0.468c0.098,0.138,0.19,0.279,0.296,0.413  c0.12,0.154,0.254,0.299,0.384,0.447c0.099,0.113,0.188,0.231,0.293,0.341c0.015,0.015,0.031,0.028,0.046,0.044  c0.017,0.017,0.03,0.037,0.047,0.054c2.473,2.535,4.721,4.728,6.896,6.847c10.223,9.967,16.976,16.551,27.739,41.398  c12.257,28.267,50.162,43.989,67.794,49.942l-5.183,40.606c-9.186,5.734-35.769,20.57-81.874,32.84  c-0.435,0.086-0.858,0.2-1.272,0.337c-14.661,3.864-30.151,7.152-46.069,9.774c-9.312,1.542-19.03,2.898-28.885,4.028  c-0.114,0.013-0.224,0.04-0.337,0.056c-0.195,0.028-0.387,0.057-0.578,0.096c-0.166,0.033-0.328,0.074-0.492,0.115  c-0.185,0.046-0.37,0.094-0.552,0.151c-0.164,0.051-0.323,0.108-0.482,0.166c-0.172,0.062-0.344,0.125-0.512,0.196  c-0.16,0.068-0.316,0.142-0.472,0.217c-0.158,0.076-0.316,0.153-0.47,0.236c-0.156,0.085-0.307,0.175-0.458,0.268  c-0.145,0.089-0.289,0.177-0.43,0.271c-0.148,0.1-0.291,0.207-0.435,0.314c-0.133,0.1-0.267,0.201-0.395,0.307  c-0.138,0.114-0.27,0.232-0.401,0.353c-0.124,0.113-0.246,0.225-0.365,0.343c-0.125,0.125-0.243,0.254-0.361,0.384  c-0.114,0.126-0.226,0.251-0.333,0.382c-0.11,0.133-0.214,0.271-0.317,0.41c-0.103,0.138-0.204,0.275-0.301,0.418  c-0.096,0.141-0.184,0.286-0.272,0.431c-0.091,0.151-0.181,0.3-0.265,0.454c-0.081,0.148-0.154,0.3-0.227,0.452  c-0.077,0.159-0.153,0.319-0.223,0.483c-0.067,0.156-0.125,0.315-0.184,0.475c-0.061,0.166-0.122,0.332-0.174,0.501  c-0.052,0.166-0.096,0.333-0.14,0.501c-0.044,0.17-0.088,0.34-0.124,0.513c-0.037,0.174-0.065,0.351-0.091,0.527  c-0.027,0.173-0.054,0.346-0.072,0.522c-0.019,0.18-0.029,0.362-0.04,0.545c-0.01,0.177-0.019,0.355-0.019,0.535  c-0.001,0.181,0.008,0.364,0.016,0.546c0.005,0.123,0.001,0.245,0.011,0.369c2.056,25.835,5.137,51.165,7.028,65.633h-13.691  c-4.367-10.878-13.224-35.016-19.399-65.642c-0.871-5.066-5.286-8.916-10.6-8.916c-1.105,0-2.17,0.168-3.173,0.478  c-10.728,0.869-19.931,1.209-32.725,1.209c-11.872,0-23.688-0.954-35.141-2.84c-16.747-2.729-32.824-7.429-47.794-13.976  c-9.911-4.321-19.306-9.456-27.948-15.278c-2.082-1.395-4.186-2.884-6.254-4.423c-4.767-3.545-11.504-2.559-15.051,2.207  c-3.546,4.766-2.559,11.504,2.206,15.051c0.738,0.549,1.483,1.08,2.228,1.616c-0.44,34.193,5.047,71.375,8.361,90.515h-13.017  c-9.719-24.339-42.511-114.051-36.185-201.744c1.619-22.43,7.639-42.686,17.461-60.194c0.01-0.014,0.022-0.026,0.031-0.04  c0.359-0.516,0.656-1.056,0.913-1.607c22.059-38.005,62.312-62.705,114.521-67.982c5.911-0.598,10.218-5.873,9.62-11.783  c-0.597-5.909-5.871-10.215-11.783-9.619c-42.495,4.295-79.21,20.498-106.175,46.858c-6.896,6.741-13.062,14.062-18.48,21.894  c-7.846-7.634-14.947-17.648-20.405-28.82C81.571,115.9,90.75,95.674,89.107,78.361c-1.449-15.274-11.317-26.056-24.554-26.829  c-15.014-0.888-23.328,5.982-27.675,11.892c-7.94,10.799-9.326,27.685-4.19,47.464C26.725,110.999,20.2,110.274,13.149,108.667z   M388.083,439.031c-4.184-10.424-12.49-33.038-18.618-61.896c8.545-1.584,16.952-3.351,25.156-5.29  c2.064,26.425,5.225,52.449,7.152,67.186H388.083z M189.711,439.031c-4.23-10.528-12.67-33.515-18.834-62.961  c8.546,2.833,17.339,5.154,26.316,6.957c1.99,22.356,4.557,43.341,6.212,56.003H189.711z M54.214,76.165  c1.114-1.516,3.003-3.202,7.765-3.202c0.417,0,0.857,0.014,1.32,0.041c3.611,0.211,4.326,6.653,4.395,7.385  c0.697,7.342-2.802,18.712-14.133,25.304C49.771,91.181,50.885,80.693,54.214,76.165z" />

      </svg>
      <h2>Better</h2><code>role="img" +<br>&lt;title&gt; + &lt;desc&gt;</code>
    </div>
    <div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" role="img" aria-labelledby="pig3house pig3wolf" x="0px" y="0px" viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve">
        <title id="pig3house">The third little pig built a house out of bricks.</title>
        <desc id="pig3wolf">Thankfully he wasn't eaten by the big, bad wolf.</desc>
        <g>
          <path class="pig3" d="M215.722,449.787h-33.151c0,0-17.525-38.274-25.72-90.584c15.508,6.781,32.443,11.811,50.363,14.732   v0.012C210.367,412.905,215.722,449.787,215.722,449.787z" />
          <path class="pig3" d="M414.09,449.787H380.94c0,0-15.498-33.823-24.155-81.345c17.665-2.91,33.533-6.398,47.662-10.142   C407.205,402.392,414.09,449.787,414.09,449.787z" />
        </g>
        <path class="pig3" d="M127.213,342.999c-1.646,48.3,10.421,106.788,10.421,106.788h-33.151  c0,0-47.384-107.066-39.723-213.275c6.41-88.822,78.124-146.545,179.325-140.401c36.442,2.214,73,15.59,104.655,35.491  c11.811-21.095,30.101-41.936,57.155-45.738c0,0,17.456,55.474-11.197,82.713c14.35,14.721,22.892,19.369,36.801,51.476  c13.921,32.107,69.743,46.596,69.743,46.596l-6.955,54.478c0,0-28.526,20.956-89.841,37.172  c-14.129,3.744-29.997,7.232-47.662,10.142c-9.307,1.541-19.114,2.921-29.418,4.104c3.141,39.468,8.623,77.243,8.623,77.243h-33.151  c0,0-14.037-30.647-22.857-74.554l-2.051,0.417c-11.938,0.973-21.745,1.264-33.846,1.264c-12.634,0-24.967-1.02-36.871-2.978  c-17.92-2.921-34.854-7.951-50.363-14.732C146.269,354.59,136.347,349.154,127.213,342.999z" />
        <path d="M243.431,106.849c0.224,0.014,0.445,0.02,0.665,0.02c5.642,0,10.378-4.395,10.726-10.102  c0.361-5.93-4.152-11.029-10.082-11.391c-1.511-0.093-3.015-0.17-4.512-0.234c-5.926-0.301-10.954,4.347-11.21,10.282  c-0.256,5.935,4.348,10.954,10.282,11.21C240.671,106.693,242.048,106.764,243.431,106.849z" />
        <path d="M369.048,254.676c0-3.068,2.501-5.563,5.576-5.563c3.069,0,5.564,2.495,5.564,5.563c0,5.94,4.817,10.756,10.756,10.756  s10.756-4.817,10.756-10.756c0-14.93-12.147-27.076-27.077-27.076c-14.937,0-27.089,12.146-27.089,27.076  c0,5.94,4.817,10.756,10.756,10.756C364.231,265.432,369.048,260.616,369.048,254.676z" />
        <path d="M13.149,108.667c-5.791-1.323-11.558,2.306-12.877,8.097c-1.32,5.791,2.305,11.557,8.097,12.877  c8.141,1.855,15.875,2.784,23.147,2.784c2.983,0,5.884-0.162,8.706-0.474c7.515,16.476,18.24,31.282,30.23,41.817  c-9.226,18.669-14.801,39.537-16.42,61.971c-7.765,107.645,38.635,213.93,40.614,218.401c1.723,3.893,5.579,6.403,9.837,6.403h33.15  c3.233,0,6.296-1.455,8.337-3.963c2.043-2.506,2.849-5.8,2.196-8.966c-0.103-0.497-8.929-43.823-10.199-85.626  c3.016,1.613,6.085,3.157,9.205,4.625c8.635,50.177,24.904,86.092,25.618,87.65c1.751,3.826,5.573,6.278,9.78,6.278h33.151  c3.123,0,6.091-1.357,8.134-3.718c2.043-2.36,2.959-5.493,2.51-8.582c-0.047-0.323-4.174-28.907-7.267-61.871  c8.247,0.86,16.605,1.299,24.985,1.299c10.413,0,18.826-0.23,27.394-0.769c8.907,39.432,21.03,66.162,21.58,67.364  c1.752,3.825,5.573,6.277,9.78,6.277h33.15c3.121,0,6.09-1.357,8.134-3.717c2.043-2.361,2.96-5.493,2.512-8.583  c-0.049-0.341-4.548-31.508-7.675-66.297c3.114-0.41,6.201-0.84,9.261-1.29c8.958,42.792,22.331,72.285,22.94,73.612  c1.752,3.825,5.573,6.276,9.779,6.276h33.15c3.123,0,6.091-1.357,8.135-3.718c2.044-2.361,2.959-5.493,2.511-8.583  c-0.063-0.438-5.973-41.375-8.959-81.907c56.692-16.156,83.707-35.675,84.881-36.539c2.373-1.744,3.927-4.384,4.301-7.306  l6.955-54.477c0.684-5.363-2.728-10.403-7.959-11.771c-14.129-3.696-52.917-18.167-62.585-40.462  c-12.284-28.354-21.046-37.115-32.018-47.816c22.961-32.642,7.535-83.01,6.805-85.327c-1.579-5.013-6.552-8.158-11.758-7.422  c-22.988,3.231-43.313,17.575-59.274,41.673c-20.115-11.551-41.06-20.122-62.402-25.514c-5.758-1.455-11.608,2.034-13.063,7.794  c-1.455,5.759,2.035,11.608,7.794,13.063c19.176,4.845,38.731,12.876,57.082,23.394c-10.443,21.636-14.552,40.989-14.745,41.913  c-1.211,5.816,2.521,11.512,8.337,12.724c0.74,0.155,1.477,0.228,2.204,0.228c4.989,0,9.462-3.489,10.52-8.565  c0.047-0.226,4.844-22.822,17.249-45.018c0.045-0.08,0.094-0.157,0.137-0.238c11.188-19.91,24.505-32.606,39.692-37.868  c3.033,15.565,6.199,45.975-10.641,61.984c-0.015,0.015-0.028,0.031-0.044,0.045c-0.017,0.017-0.037,0.031-0.054,0.047  c-0.123,0.119-0.23,0.248-0.346,0.373c-0.119,0.127-0.243,0.252-0.355,0.383c-0.124,0.145-0.233,0.298-0.347,0.449  c-0.103,0.136-0.213,0.269-0.309,0.409c-0.109,0.157-0.202,0.321-0.302,0.482c-0.086,0.141-0.177,0.279-0.257,0.422  c-0.094,0.169-0.172,0.343-0.256,0.515c-0.069,0.143-0.143,0.283-0.205,0.428c-0.076,0.177-0.138,0.359-0.204,0.54  c-0.054,0.146-0.112,0.29-0.159,0.438c-0.058,0.184-0.102,0.37-0.151,0.556c-0.039,0.148-0.083,0.296-0.115,0.446  c-0.04,0.185-0.066,0.372-0.096,0.56c-0.025,0.154-0.055,0.308-0.073,0.463c-0.021,0.183-0.029,0.367-0.04,0.551  c-0.011,0.16-0.026,0.319-0.029,0.481c-0.003,0.18,0.006,0.359,0.012,0.539c0.005,0.165,0.004,0.329,0.017,0.494  c0.013,0.175,0.04,0.35,0.062,0.525c0.022,0.168,0.037,0.336,0.066,0.502c0.03,0.171,0.073,0.34,0.111,0.51  c0.038,0.168,0.07,0.337,0.116,0.503c0.046,0.168,0.105,0.331,0.159,0.496c0.054,0.166,0.103,0.331,0.166,0.495  c0.062,0.165,0.139,0.324,0.211,0.485c0.07,0.159,0.136,0.321,0.214,0.477c0.081,0.161,0.175,0.318,0.266,0.476  c0.085,0.15,0.165,0.302,0.257,0.449c0.101,0.159,0.215,0.312,0.326,0.468c0.098,0.138,0.19,0.279,0.296,0.413  c0.12,0.154,0.254,0.299,0.384,0.447c0.099,0.113,0.188,0.231,0.293,0.341c0.015,0.015,0.031,0.028,0.046,0.044  c0.017,0.017,0.03,0.037,0.047,0.054c2.473,2.535,4.721,4.728,6.896,6.847c10.223,9.967,16.976,16.551,27.739,41.398  c12.257,28.267,50.162,43.989,67.794,49.942l-5.183,40.606c-9.186,5.734-35.769,20.57-81.874,32.84  c-0.435,0.086-0.858,0.2-1.272,0.337c-14.661,3.864-30.151,7.152-46.069,9.774c-9.312,1.542-19.03,2.898-28.885,4.028  c-0.114,0.013-0.224,0.04-0.337,0.056c-0.195,0.028-0.387,0.057-0.578,0.096c-0.166,0.033-0.328,0.074-0.492,0.115  c-0.185,0.046-0.37,0.094-0.552,0.151c-0.164,0.051-0.323,0.108-0.482,0.166c-0.172,0.062-0.344,0.125-0.512,0.196  c-0.16,0.068-0.316,0.142-0.472,0.217c-0.158,0.076-0.316,0.153-0.47,0.236c-0.156,0.085-0.307,0.175-0.458,0.268  c-0.145,0.089-0.289,0.177-0.43,0.271c-0.148,0.1-0.291,0.207-0.435,0.314c-0.133,0.1-0.267,0.201-0.395,0.307  c-0.138,0.114-0.27,0.232-0.401,0.353c-0.124,0.113-0.246,0.225-0.365,0.343c-0.125,0.125-0.243,0.254-0.361,0.384  c-0.114,0.126-0.226,0.251-0.333,0.382c-0.11,0.133-0.214,0.271-0.317,0.41c-0.103,0.138-0.204,0.275-0.301,0.418  c-0.096,0.141-0.184,0.286-0.272,0.431c-0.091,0.151-0.181,0.3-0.265,0.454c-0.081,0.148-0.154,0.3-0.227,0.452  c-0.077,0.159-0.153,0.319-0.223,0.483c-0.067,0.156-0.125,0.315-0.184,0.475c-0.061,0.166-0.122,0.332-0.174,0.501  c-0.052,0.166-0.096,0.333-0.14,0.501c-0.044,0.17-0.088,0.34-0.124,0.513c-0.037,0.174-0.065,0.351-0.091,0.527  c-0.027,0.173-0.054,0.346-0.072,0.522c-0.019,0.18-0.029,0.362-0.04,0.545c-0.01,0.177-0.019,0.355-0.019,0.535  c-0.001,0.181,0.008,0.364,0.016,0.546c0.005,0.123,0.001,0.245,0.011,0.369c2.056,25.835,5.137,51.165,7.028,65.633h-13.691  c-4.367-10.878-13.224-35.016-19.399-65.642c-0.871-5.066-5.286-8.916-10.6-8.916c-1.105,0-2.17,0.168-3.173,0.478  c-10.728,0.869-19.931,1.209-32.725,1.209c-11.872,0-23.688-0.954-35.141-2.84c-16.747-2.729-32.824-7.429-47.794-13.976  c-9.911-4.321-19.306-9.456-27.948-15.278c-2.082-1.395-4.186-2.884-6.254-4.423c-4.767-3.545-11.504-2.559-15.051,2.207  c-3.546,4.766-2.559,11.504,2.206,15.051c0.738,0.549,1.483,1.08,2.228,1.616c-0.44,34.193,5.047,71.375,8.361,90.515h-13.017  c-9.719-24.339-42.511-114.051-36.185-201.744c1.619-22.43,7.639-42.686,17.461-60.194c0.01-0.014,0.022-0.026,0.031-0.04  c0.359-0.516,0.656-1.056,0.913-1.607c22.059-38.005,62.312-62.705,114.521-67.982c5.911-0.598,10.218-5.873,9.62-11.783  c-0.597-5.909-5.871-10.215-11.783-9.619c-42.495,4.295-79.21,20.498-106.175,46.858c-6.896,6.741-13.062,14.062-18.48,21.894  c-7.846-7.634-14.947-17.648-20.405-28.82C81.571,115.9,90.75,95.674,89.107,78.361c-1.449-15.274-11.317-26.056-24.554-26.829  c-15.014-0.888-23.328,5.982-27.675,11.892c-7.94,10.799-9.326,27.685-4.19,47.464C26.725,110.999,20.2,110.274,13.149,108.667z   M388.083,439.031c-4.184-10.424-12.49-33.038-18.618-61.896c8.545-1.584,16.952-3.351,25.156-5.29  c2.064,26.425,5.225,52.449,7.152,67.186H388.083z M189.711,439.031c-4.23-10.528-12.67-33.515-18.834-62.961  c8.546,2.833,17.339,5.154,26.316,6.957c1.99,22.356,4.557,43.341,6.212,56.003H189.711z M54.214,76.165  c1.114-1.516,3.003-3.202,7.765-3.202c0.417,0,0.857,0.014,1.32,0.041c3.611,0.211,4.326,6.653,4.395,7.385  c0.697,7.342-2.802,18.712-14.133,25.304C49.771,91.181,50.885,80.693,54.214,76.165z" />
      </svg>
      <h2>Best</h2><code>role="img" +<br>&lt;title&gt; + &lt;desc&gt; +<br>aria-labelledby</code>
    </div>
  </div>
</body>
              
            
!

CSS

              
                body {
  text-align: center;
  margin: 1rem 3rem 2rem;
  font-family: "Open Sans", sans-serif;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 3rem;
  grid-row-gap: 5rem;
}

svg {
  max-width: 400px;
  max-height: 400px;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2rem;
  margin: 0;
}

code {
  font-size: 2rem;
}

.codewrapper {
  border: 1px solid #999;
  color: #fff;
  background: #666;
}

.pig1 {
  fill: #2ec4b6;
}

.pig2 {
  fill: #ffc10d;
}

.pig3 {
  fill: #e90909;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  font-size: 0;
}

              
            
!

JS

              
                
              
            
!
999px

Console