<section id="tires-4">
<div class="container"></div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="../../js/components/tires-4.js" type="module"></script>
<section id="tires-4">
<div class="container"></div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="{{ path '/js/components/tires-4.js' }}" type="module"></script>
/* No context defined. */
import * as utils from './utils-v1.js';
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("tires-4 active");
const width = 400;
const height = 300;
const draw = SVG().addTo('#tires-4 .container')
.size(width, height)
.viewbox(0, 0, width, height);
const x = utils.getRandomInt(0, width);
const y = utils.getRandomInt(0, height);
const w = utils.getRandomInt(0, width - x);
const h = utils.getRandomInt(0, height - y);
const color = utils.makeColor();
const rect = draw.rect(w, h)
.attr({
fill: color,
x: x,
y: y
});
});
})();
#tires-4 {
padding: 1rem;
.container {
width: 100%;
height: calc(100vh - 2rem);
}
svg {
border: 1px solid teal;
width: 100%;
height: auto;
}
}
No notes defined.