<section id="bold_turquoise_bear-6b">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
<defs>
<clipPath id="clip-1">
<rect class="clip-1-rect" x="8" y="8" width="114" height="49" />
</clipPath>
<clipPath id="clip-2">
<rect class="clip-2-rect" x="10" y="10" width="110" height="45" />
</clipPath>
</defs>
<rect clip-path="url(#clip-1)" class="basic-rect-1" x="0" y="0" width="300" height="100"></rect>
<text clip-path="url(#clip-2)" class="basic-text-1">
<tspan x="10" y="20">This is my block of text.</tspan>
<tspan x="10" dy="15">This is my second line.</tspan>
<tspan x="10" dy="15">This is my third line.</tspan>
</text>
</svg>
</section>
<script src="../../js/components/bold_turquoise_bear-6b.js"></script>
<section id="bold_turquoise_bear-6b">
{{!-- Basiucally, the y coord for text sets the baseline y, and we need to account for that in our clip paths. --}}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
<defs>
<clipPath id="clip-1">
<rect class="clip-1-rect" x="8" y="8" width="114" height="49"/>
</clipPath>
<clipPath id="clip-2">
<rect class="clip-2-rect" x="10" y="10" width="110" height="45"/>
</clipPath>
</defs>
<rect clip-path="url(#clip-1)" class="basic-rect-1" x="0" y="0" width="300" height="100"></rect>
<text clip-path="url(#clip-2)" class="basic-text-1">
<tspan x="10" y="20">This is my block of text.</tspan>
<tspan x="10" dy="15">This is my second line.</tspan>
<tspan x="10" dy="15">This is my third line.</tspan>
</text>
</svg>
</section>
<script src="{{ path '/js/components/bold_turquoise_bear-6b.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("bold_turquoise_bear-6b active");
window.setInterval(() => {
document.querySelector("#bold_turquoise_bear-6b").classList.toggle('active');
}, 4000)
});
})();
#bold_turquoise_bear-6b {
padding: 1rem;
svg {
font-size: 100%;
border: 1px solid teal;
background: black;
}
.basic-text-1 {
font-size: 10px;
font-family: "Helvetica Neue", sans-serif;
fill: white;
}
.basic-rect-1 {
fill: brown;
}
// We set the transform origin of our clipping rectangles to the center points,
// according to how they are set in the html code...the calc's below are for
// demo purposes and I'm sure there's a better way to handle this, possibly
// via setting origins via script or something.
.clip-1-rect {
transition: transform 2s ease;
transform: scale(0, 0);
transform-origin: calc(8px + 114px / 2) calc(8px + 49px / 2);
}
.clip-2-rect {
transition: transform 2s ease 2s;
transform: scale(1, 1);
transform-origin: calc(10px + 110px / 2) calc(10px + 45px / 2);
}
&.active {
.clip-1-rect {
transform: scale(1, 1);
}
.clip-2-rect {
transform: scale(0, 0);
}
}
}
No notes defined.