var xmlns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
//Color
var primaryColor = "#4e2468";
var secondaryColor = "#f31859";
var tertiaryColor = "#2dc3a5";
var quaternaryColor = "#d2eac9";
//Functions
function getRandomNumber(number) {
return Math.floor(Math.random() * number + 1);
}
function generateRandomShape() {
var shapeTypeNumber = getRandomNumber(2);
var shapeType;
if (shapeTypeNumber < 2) {
shapeType = "circle-";
} else {
shapeType = "square-";
}
var shapeDisplayNumber = getRandomNumber(5);
var shapeDisplay;
if (shapeDisplayNumber < 5) {
shapeDisplay = "initial";
} else {
shapeDisplay = "none";
}
var shapeNumber = getRandomNumber(32);
var contentName = "#" + shapeType + shapeNumber;
return contentName;
}
//Color
var xPrimaryColor = document.querySelectorAll(".primary-color");
var iPrimaryColor;
for (iPrimaryColor = 0; iPrimaryColor < xPrimaryColor.length; iPrimaryColor++) {
xPrimaryColor[iPrimaryColor].setAttribute("fill", primaryColor);
}
var xSecondaryColor = document.querySelectorAll(".secondary-color");
var iSecondaryColor;
for (
iSecondaryColor = 0;
iSecondaryColor < xSecondaryColor.length;
iSecondaryColor++
) {
xSecondaryColor[iSecondaryColor].setAttribute("fill", secondaryColor);
}
var xTertiaryColor = document.querySelectorAll(".tertiary-color");
var iTertiaryColor;
for (
iTertiaryColor = 0;
iTertiaryColor < xTertiaryColor.length;
iTertiaryColor++
) {
xTertiaryColor[iTertiaryColor].setAttribute("fill", tertiaryColor);
}
var xQuaternaryColor = document.querySelectorAll(".quaternary-color");
var iQuaternaryColor;
for (
iQuaternaryColor = 0;
iQuaternaryColor < xQuaternaryColor.length;
iQuaternaryColor++
) {
xQuaternaryColor[iQuaternaryColor].setAttribute("fill", QuaternaryColor);
}
//Patterns
var xPatternColor = document.querySelectorAll("pattern");
var iPatternColor;
for (iPatternColor = 0; iPatternColor < xPatternColor.length; iPatternColor++) {
var patternColorNumber = getRandomNumber(4);
var patternColor;
if (patternColorNumber > 0) {
patternColor = primaryColor;
}
if (patternColorNumber > 1) {
patternColor = secondaryColor;
}
if (patternColorNumber > 2) {
patternColor = tertiaryColor;
}
if (patternColorNumber > 3) {
patternColor = quaternaryColor;
}
xPatternColor[iPatternColor].setAttribute("fill", patternColor);
}
//Generate letter
var xLetter = document.querySelectorAll(".letter");
var iLetter;
for (iLetter = 0; iLetter < xLetter.length; iLetter++) {
var rows = 3;
var columns = 2;
var positionX = 0;
var positionY = 0;
while (positionY < rows * 50) {
var tileRow = document.createElementNS(xmlns, "g");
tileRow.classList.add("tile-row");
tileRow.setAttribute("transform", "translate(0 " + positionY + ")");
xLetter[iLetter].appendChild(tileRow);
var positionY = positionY + 50;
}
while (positionX < columns * 50) {
var xTileRow = document.querySelectorAll(".tile-row");
var iTileRow;
for (iTileRow = 0; iTileRow < xTileRow.length; iTileRow++) {
var tileColumn = document.createElementNS(xmlns, "g");
tileColumn.classList.add("tile-super-wrapper");
tileColumn.setAttribute("transform", "translate(" + positionX + " 0)");
var superWrapperBgColorNumber = getRandomNumber(3);
var superWrapperBgColor;
if (superWrapperBgColorNumber > 0) {
superWrapperBgColor = primaryColor;
}
if (superWrapperBgColorNumber > 1) {
superWrapperBgColor = secondaryColor;
}
if (superWrapperBgColorNumber > 2) {
patternColor = tertiaryColor;
}
var superWrapperBg = document.createElementNS(xmlns, "use");
superWrapperBg.setAttributeNS(xlinkns, "href", "#basic-square-1");
superWrapperBg.setAttribute("fill", superWrapperBgColor);
xTileRow[iTileRow].appendChild(tileColumn);
tileColumn.appendChild(superWrapperBg);
}
var positionX = positionX + 50;
}
}
//Wrapper and super wrapper
var xTileSuperWrapper = document.querySelectorAll(".tile-super-wrapper");
var iTileSuperWrapper;
for (
iTileSuperWrapper = 0;
iTileSuperWrapper < xTileSuperWrapper.length;
iTileSuperWrapper++
) {
var wrapperTypeNumber = getRandomNumber(3);
if (wrapperTypeNumber > 1) {
var tile0 = document.createElementNS(xmlns, "g");
tile0.classList.add("tile-wrapper");
xTileSuperWrapper[iTileSuperWrapper].appendChild(tile0);
} else {
var tile1 = document.createElementNS(xmlns, "g");
tile1.classList.add("tile-wrapper");
tile1.setAttribute("transform", "scale(0.5)");
var tile2 = document.createElementNS(xmlns, "g");
tile2.classList.add("tile-wrapper");
tile2.setAttribute("transform", "translate(25) scale(0.5)");
var tile3 = document.createElementNS(xmlns, "g");
tile3.classList.add("tile-wrapper");
tile3.setAttribute("transform", "translate(0 25) scale(0.5)");
var tile4 = document.createElementNS(xmlns, "g");
tile4.classList.add("tile-wrapper");
tile4.setAttribute("transform", "translate(25 25) scale(0.5)");
xTileSuperWrapper[iTileSuperWrapper].appendChild(tile1);
xTileSuperWrapper[iTileSuperWrapper].appendChild(tile2);
xTileSuperWrapper[iTileSuperWrapper].appendChild(tile3);
xTileSuperWrapper[iTileSuperWrapper].appendChild(tile4);
}
}
//Generate Tile
var xTile = document.querySelectorAll(".tile-wrapper");
var iTile;
for (iTile = 0; iTile < xTile.length; iTile++) {
var randomShape1 = generateRandomShape();
var randomShape2 = generateRandomShape();
var randomShape3 = generateRandomShape();
var randomTileColorNumber = getRandomNumber(3);
if (randomTileColorNumber > 0) {
randomTileColor1 = primaryColor;
randomTileColor2 = quaternaryColor;
randomTileColor3 = secondaryColor;
randomTileColor4 = tertiaryColor;
}
if (randomTileColorNumber > 1) {
randomTileColor1 = quaternaryColor;
randomTileColor2 = tertiaryColor;
randomTileColor3 = primaryColor;
randomTileColor4 = secondaryColor;
}
if (randomTileColorNumber > 2) {
randomTileColor1 = secondaryColor;
randomTileColor2 = tertiaryColor;
randomTileColor3 = quaternaryColor;
randomTileColor4 = primaryColor;
}
var tileLayer1 = document.createElementNS(xmlns, "use");
tileLayer1.setAttributeNS(xlinkns, "href", "#basic-square-1");
tileLayer1.setAttribute("fill", randomTileColor1);
var tileLayer2 = document.createElementNS(xmlns, "use");
tileLayer2.setAttributeNS(xlinkns, "href", randomShape1);
tileLayer2.setAttribute("fill", randomTileColor2);
var tileLayer3 = document.createElementNS(xmlns, "use");
tileLayer3.setAttributeNS(xlinkns, "href", randomShape2);
tileLayer3.setAttribute("fill", randomTileColor3);
var tileLayer4 = document.createElementNS(xmlns, "use");
tileLayer4.setAttributeNS(xlinkns, "href", randomShape3);
tileLayer4.setAttribute("fill", randomTileColor4);
xTile[iTile].appendChild(tileLayer1);
xTile[iTile].appendChild(tileLayer2);
xTile[iTile].appendChild(tileLayer3);
xTile[iTile].appendChild(tileLayer4);
}
//Entropy
var numOctavesNumber = getRandomNumber(20);
var xOctaves = document.querySelectorAll("feTurbulence");
var iOctaves;
for (iOctaves = 0; iOctaves < xOctaves.length; iOctaves++) {
xOctaves[iOctaves].setAttribute("numOctaves", numOctavesNumber);
}
var xContentFilter = document.querySelectorAll(".tile-wrapper");
var iContentFilter;
for (
iContentFilter = 0;
iContentFilter < xContentFilter.length;
iContentFilter++
) {
var shapeFilterNumber = getRandomNumber(4);
xContentFilter[iContentFilter].style.filter =
"url(#displacementFilter" + shapeFilterNumber + ")";
}
!
