<section id="bold_turquoise_bear-3c">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
        <defs>
            <clipPath id="clip-1">
                <rect class="clip-1-rect" x="10" y="10" width="80" height="80" />
            </clipPath>

            <clipPath id="clip-2">
                <rect class="clip-2-rect" x="110" y="10" width="80" height="80" />
            </clipPath>

            <clipPath id="clip-3">
                <rect class="clip-3-rect" x="210" y="10" width="80" height="80" />
            </clipPath>
        </defs>

        <rect class="bg-rect" x="10" y="10" width="80" height="80" />
        <rect class="bg-rect" x="110" y="10" width="80" height="80" />
        <rect class="bg-rect" x="210" y="10" width="80" height="80" />

        <image clip-path="url(#clip-1)" href="/img/6404964189_8d2c7688c5_k.jpg" preserveAspectRatio="xMidYMid slice" x="0" y="0" width="300" height="100"></image>
        <image clip-path="url(#clip-2)" href="/img/22534825249_79ee4841af_k.jpg" preserveAspectRatio="xMidYMid slice" x="0" y="0" width="300" height="100"></image>
        <image clip-path="url(#clip-3)" href="/img/32242741015_6accbb5d52_k.jpg" preserveAspectRatio="xMidYMid slice" x="0" y="0" width="300" height="100"></image>
    </svg>
</section>

<script src="../../js/components/bold_turquoise_bear-3c.js"></script>
<section id="bold_turquoise_bear-3c">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
        <defs>
            <clipPath id="clip-1">
                <rect class="clip-1-rect" x="10" y="10" width="80" height="80"/>
            </clipPath>

            <clipPath id="clip-2">
                <rect class="clip-2-rect" x="110" y="10" width="80" height="80"/>
            </clipPath>

            <clipPath id="clip-3">
                <rect class="clip-3-rect" x="210" y="10" width="80" height="80"/>
            </clipPath>
        </defs>

        <rect class="bg-rect" x="10" y="10" width="80" height="80"/>
        <rect class="bg-rect" x="110" y="10" width="80" height="80"/>
        <rect class="bg-rect" x="210" y="10" width="80" height="80"/>

        <image clip-path="url(#clip-1)" href="/img/6404964189_8d2c7688c5_k.jpg" preserveAspectRatio="xMidYMid slice" x="0" y="0" width="300" height="100"></image>
        <image clip-path="url(#clip-2)" href="/img/22534825249_79ee4841af_k.jpg" preserveAspectRatio="xMidYMid slice" x="0" y="0" width="300" height="100"></image>
        <image clip-path="url(#clip-3)" href="/img/32242741015_6accbb5d52_k.jpg" preserveAspectRatio="xMidYMid slice" x="0" y="0" width="300" height="100"></image>
    </svg>
</section>

<script src="{{ path '/js/components/bold_turquoise_bear-3c.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("bold_turquoise_bear-3c active");
    
        window.setInterval(() => {
          document.querySelector("#bold_turquoise_bear-3c").classList.toggle('active');
        }, 2000)
      });
    })();
    
  • URL: /components/raw/bold_turquoise_bear-3c/bold_turquoise_bear-3c.js
  • Filesystem Path: components/01-metal/04-working-with-clip-paths/03-bold_turquoise_bear-3c/bold_turquoise_bear-3c.js
  • Size: 268 Bytes
  • Content:
    #bold_turquoise_bear-3c {
      padding: 1rem;
    
      svg {
        border: 1px solid teal;
    
        .bg-rect {
          fill: coral;
        }
    
        // So the transform origin is the center of the clip path as it's absolutely
        // placed by the svg code...and we can move the transform-origin around to
        // scale up around a different point
    
        .clip-1-rect,
        .clip-2-rect,
        .clip-3-rect {
          transition: transform 2s ease-in-out;
        }
    
        .clip-1-rect {
          transform: scale(0.5, 0.5);
          transform-origin: 90px 90px;
        }
    
        .clip-2-rect {
          transform: scale(0.15, 0.75);
          transform-origin: 175px 50px;
        }
    
        .clip-3-rect {
          transform: scale(0.5, 0.5);
          transform-origin: 290px 50px;
        }
      }
    
      // And transforming around the transform-origin works at this point about
      // as one would expect. (See ex 4)
      &.active {
        .clip-1-rect {
          transform: scale(1, 1);
        }
    
        .clip-2-rect {
          transform: scale(0.75, 0.15);
        }
    
        .clip-3-rect {
          transform: scale(0.15, 0.95);
        }
      }
    }
    
  • URL: /components/raw/bold_turquoise_bear-3c/bold_turquoise_bear-3c.scss
  • Filesystem Path: components/01-metal/04-working-with-clip-paths/03-bold_turquoise_bear-3c/bold_turquoise_bear-3c.scss
  • Size: 1 KB
  • Handle: @bold_turquoise_bear-3c
  • Preview:
  • Filesystem Path: components/01-metal/04-working-with-clip-paths/03-bold_turquoise_bear-3c/bold_turquoise_bear-3c.hbs

No notes defined.