<section id="random-2">
    <svg viewBox="0,0,1000,500" preserveAspectRatio="xMidYMid meet">
        <rect x="20" y="20" width="300" height="300"></rect>
        <rect x="680" y="20" width="300" height="300"></rect>
        <rect x="200" y="150" width="700" height="100"></rect>

        <text x="550" y="205" class="semi-opaque">Hello World</text>
        <text x="550" y="450" class="plain">Hellooooo World</text>
    </svg>
</section>

<script src="../../js/components/random-2.js"></script>
<section id="random-2">
    <svg viewBox="0,0,1000,500" preserveAspectRatio="xMidYMid meet">
        <rect x="20" y="20" width="300" height="300"></rect>
        <rect x="680" y="20" width="300" height="300"></rect>
        <rect x="200" y="150" width="700" height="100"></rect>

        <text x="550" y="205" class="semi-opaque">Hello World</text>
        <text x="550" y="450" class="plain">Hellooooo World</text>
    </svg>
</section>

<script src="{{ path '/js/components/random-2.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("random-2 active");
    
      });
    })();
    
  • URL: /components/raw/random-2/random-2.js
  • Filesystem Path: components/01-metal/01-random/02-random-2/random-2.js
  • Size: 126 Bytes
  • Content:
    #random-2 {
      padding: 1rem;
    
      svg {
        border: 1px solid teal;
    
        rect {
          fill: teal;
          fill-opacity: 0.5;
        }
    
        text {
          font-family: "Helvetica Neue", sans-serif;
          font-size: 100px;
          font-weight: bold;
          fill: red;
          text-anchor: middle;
    
          &.semi-opaque {
            fill-opacity: 0.75;
          }
    
          &.plain {
            font-weight: normal;
          }
        }
      }
    }
    
  • URL: /components/raw/random-2/random-2.scss
  • Filesystem Path: components/01-metal/01-random/02-random-2/random-2.scss
  • Size: 406 Bytes

No notes defined.