<section id="blobs-3">
<div class="container">
<svg id="blobs-3-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">
</svg>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script src="../../js/components/blobs-3.js" type="module"></script>
<section id="blobs-3">
<div class="container">
<svg id="blobs-3-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">
</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/blobs-3.js' }}" type="module"></script>
/* No context defined. */
import {
getRandomIntInclusive,
} from "./utils-v1.js";
const colors = [
"#70948a",
"#9F9FA5",
"#B7C4C4",
"#E4E8E8",
"#D8A2AF",
]
const circleColors = [
"#4A635C",
"#728B8B",
"#91A1A1",
"#69696F",
"#B24A63",
]
function getColor(colors) {
return colors[getRandomIntInclusive(0, colors.length - 1)];
}
function getRandomArrayElement(arr) {
return arr[getRandomIntInclusive(0, arr.length - 1)];
}
console.log("blobs-3 active");
const draw = SVG('#blobs-3-svg');
const width = draw.width();
const height = draw.height();
const sqSize = 25;
function makeCircle() {
let curX = getRandomIntInclusive(2, sqSize - 3);
let curY = getRandomIntInclusive(2, sqSize - 3);
let d = Math.min(curX, curY, sqSize - curX, sqSize - curY) * 2;
// draw a circle there
let circle = draw.circle(d)
.attr({
cx: curX,
cy: curY,
});
return circle;
}
// Blob code
const blobs = [];
const numBlobs = 50;
const defs = draw.defs();
for (let i = 0; i < numBlobs; i++) {
// Create a group
const group = defs.group();
// Create a square inside the group
let curSquare = group.rect(sqSize, sqSize);
// get some circles
group.add(makeCircle());
group.add(makeCircle());
group.add(makeCircle());
blobs.push(group);
}
// Grid code
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 = getRandomArrayElement(blobs).clone();
let accentColor = getColor(circleColors);
let objscale = sqSize / currentShape.bbox().width * 0.979;
currentShape.transform({
position: [startX + c * sqSize + sqSize / 2, startY + r * sqSize + sqSize / 2],
scale: objscale,
rotate: getRandomIntInclusive(0, 3) * 90
});
let squares = currentShape.find('rect');
squares.fill(getColor(colors));
squares.stroke({
'color': accentColor,
'width': 0.05
})
let circles = currentShape.find('circle');
circles.fill(accentColor);
// circles.stroke({
// 'color': '#fff',
// 'width': 0.1
// })
draw.add(currentShape);
}
}
#blobs-3 {
padding: 1rem;
.container {
width: 100%;
height: calc(100vh - 2rem);
}
svg {
border: 1px solid teal;
width: 100%;
height: auto;
}
}
No notes defined.