title: Converting Adobe XD prototype to HTML
body: <p>I made this prototype: </p>
  
  <p><a href="https://i.stack.imgur.com/YPmwh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YPmwh.png" alt="enter image description here"></a></p>
  
  <p>Now I want to convert it to HTML, though I am having trouble with two things. First is the SVG. I can't get it to go off the screen, it keeps auto resizing to fit the screen.</p>
  
  <p>Second, how would I go about making the green part below the SVG path?</p>
  
  <p>What my HTML looks like currently:</p>
  
  <p><a href="https://i.stack.imgur.com/D3Fae.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D3Fae.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" /&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100i,300,300i,400,500" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="overlay" id="heading"&gt;
        &lt;h1&gt;Welcome&lt;/h1&gt;
      &lt;/div&gt;
      &lt;img&gt;
        &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="3837.005 1394.976 2112.025 1122.24"&gt;
        &lt;defs&gt;
          &lt;style&gt;
            .cls-1 {
              fill: rgba(0, 0, 0, 0);
              stroke: #ffeb3b;
              stroke-width: 20px;
            }
  
            .cls-2 {
              margin-left: -30px;
              margin-right: -30px;
            }
          &lt;/style&gt;
        &lt;/defs&gt;
        &lt;g class="cls-2" transform="matrix(1, 0, 0, 1, 0, 0)"&gt;
          &lt;path id="Path_8-2" data-name="Path 8" class="cls-1" d="M-109.8,306.4s86.5-29.5,173.4-14.1,284.3,61.6,408.1,90.3S729.9,311.9,886.9,259s145.2,272.8,237.4,263,130-247.5,223.7-202.2,105.3,50,194.3,33.4S1726.8,107,1785.6,104s39.3,286.8,320.5,309.5,76.3,0" transform="translate(3906 1313)"/&gt;
        &lt;/g&gt;
        &lt;/svg&gt;
      &lt;/img&gt;
  
      &lt;div class="overlay" id="introabout"&gt;
        &lt;h2&gt;&lt;i&gt;Live data from the Faroe Islands&lt;br /&gt;
        displayed visually.&lt;/i&gt;&lt;/h2&gt;
      &lt;/div&gt;
  
      Hello, World!
    &lt;/body&gt;
    &lt;footer&gt;&lt;/footer&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>