SVG Sketchbook

Random 1 

<section id="random-1">
    <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-1.js"></script>
 
<section id="random-1">
    <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-1.js' }}"></script>
 
/* No context defined. */
  • Content: 
    (function () {
  document.addEventListener('DOMContentLoaded', function () {
    console.log("random-1 active");

  });
})();
  • URL: /components/raw/random-1/random-1.js
  • Filesystem Path: components/01-metal/01-random/01-random-1/random-1.js
  • Size: 126 Bytes
  • Content: 
    #random-1 {
  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-1/random-1.scss
  • Filesystem Path: components/01-metal/01-random/01-random-1/random-1.scss
  • Size: 406 Bytes

No notes defined.