<section id="shapes-3b-2">
<div class="container">
<svg id="shapes-3b-2-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="400" height="300" viewBox="0 0 400 300">
<defs>
<path id="blob1" d="M8,6C8,6-7,8,4,24s17,34,18,22s11-19,18-11s10,5.6,10-0.2S51.9,0,38,0S8,6,8,6z" />
<path id="blob2" d="M34,50c-8.8,0-16-7.2-16-16c0-5.2,2.5-9.8,6.4-12.8c-0.9-0.8-1.6-1.9-2-3.1C20.2,21.6,16.4,24,12,24 C5.4,24,0,18.6,0,12S5.4,0,12,0c6.3,0,11.5,4.9,12,11.1C25.2,9.8,27,9,29,9c3.9,0,7,3.1,7,7c0,0.7-0.1,1.4-0.3,2.1 C43.7,18.9,50,25.7,50,34C50,42.8,42.8,50,34,50z" />
<path id="blob3" d="M50,19.5c0,4.1-11.2,7.5-25,7.5c-0.7,0-1.3,0-2,0c0.2,9.3-0.6,18.5-2.2,21.7c-1.8,3.5-4.9-0.1-7.2-7.1 c-3.3,0.6-6.3-8.4-7.9-17.3C2.1,23,0,21.3,0,19.5c0-1.6,1.7-3.1,4.7-4.4c-0.1-1.9-0.1-3.6,0.1-4.9c0.4-3.6,2.1-4.3,5.5-5.7 c1.3-0.5,2.5-1,3.6-1.4c1.1-2.6,2.3-3.9,3.5-2.9c0.7,0.6,1.3,1.8,1.8,3.6c0.6,0.7,1.2,1.9,1.7,3.5c0.4,1.3,0.7,2.9,1,4.7 c1-0.1,2.1-0.1,3.2-0.1C38.8,12,50,15.4,50,19.5z" />
</defs>
</svg>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="../../js/components/shapes-3b-2.js" type="module"></script>
<section id="shapes-3b-2">
<div class="container">
<svg id="shapes-3b-2-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="400" height="300" viewBox="0 0 400 300">
<defs>
<path id="blob1" d="M8,6C8,6-7,8,4,24s17,34,18,22s11-19,18-11s10,5.6,10-0.2S51.9,0,38,0S8,6,8,6z"/>
<path id="blob2" d="M34,50c-8.8,0-16-7.2-16-16c0-5.2,2.5-9.8,6.4-12.8c-0.9-0.8-1.6-1.9-2-3.1C20.2,21.6,16.4,24,12,24 C5.4,24,0,18.6,0,12S5.4,0,12,0c6.3,0,11.5,4.9,12,11.1C25.2,9.8,27,9,29,9c3.9,0,7,3.1,7,7c0,0.7-0.1,1.4-0.3,2.1 C43.7,18.9,50,25.7,50,34C50,42.8,42.8,50,34,50z"/>
<path id="blob3" d="M50,19.5c0,4.1-11.2,7.5-25,7.5c-0.7,0-1.3,0-2,0c0.2,9.3-0.6,18.5-2.2,21.7c-1.8,3.5-4.9-0.1-7.2-7.1 c-3.3,0.6-6.3-8.4-7.9-17.3C2.1,23,0,21.3,0,19.5c0-1.6,1.7-3.1,4.7-4.4c-0.1-1.9-0.1-3.6,0.1-4.9c0.4-3.6,2.1-4.3,5.5-5.7 c1.3-0.5,2.5-1,3.6-1.4c1.1-2.6,2.3-3.9,3.5-2.9c0.7,0.6,1.3,1.8,1.8,3.6c0.6,0.7,1.2,1.9,1.7,3.5c0.4,1.3,0.7,2.9,1,4.7 c1-0.1,2.1-0.1,3.2-0.1C38.8,12,50,15.4,50,19.5z"/>
</defs>
</svg>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="{{ path '/js/components/shapes-3b-2.js' }}" type="module"></script>
/* No context defined. */
import {
getRandomInt,
getRandomIntInclusive,
shuffleArray
} from "./utils-v1.js";
const colors = [
"#CC1177",
"#FF33AA",
"#CC3399",
"#FF66CC",
"#990044",
]
const shapes = [
"blob1",
"blob2",
"blob3",
]
function getColor(colors) {
return colors[getRandomIntInclusive(0, colors.length - 1)];
}
function getRandomArrayElement(arr) {
return arr[getRandomIntInclusive(0, arr.length - 1)];
}
console.log("shapes-3b-2 active");
const draw = SVG('#shapes-3b-2-svg');
const width = draw.width();
const height = draw.height();
const bg = draw.rect(width, height).fill("#290318");
const sqSize = 30;
let cols = Math.floor(width / sqSize);
let rows = Math.floor(height / sqSize);
let startX = (width - (cols * sqSize)) / 2;
let startY = (height - (rows * sqSize)) / 2;
console.log({startX, startY});
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
let currentShape = draw.use(getRandomArrayElement(shapes));
let objscale = sqSize / currentShape.bbox().width;
currentShape.transform({
position: [startX + c * sqSize + sqSize / 2, startY + r * sqSize + sqSize / 2],
scale: objscale,
rotate: getRandomIntInclusive(0, 3) * 90
});
currentShape.attr({
fill: getColor(colors),
});
}
}
#shapes-3b-2 {
padding: 1rem;
.container {
width: 100%;
height: calc(100vh - 2rem);
}
svg {
border: 1px solid teal;
width: 100%;
height: auto;
}
}
No notes defined.