SVG Generative Art – Generate by John Woi in Scalable Vector Graphics(SVG).
In HTML:
<?xml version="1.0" encoding="utf-8" ?> <svg id="canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg> <button class="btn btn-generate"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" viewBox="0 0 16 16"><path d="M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 1 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z"/><path d="M6.641 11.671V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1 0-1.37-.943-2.246-2.456-2.246H5.5v7.352h1.141zm0-3.75V5.277h1.57c.881 0 1.416.499 1.416 1.32 0 .84-.504 1.324-1.386 1.324h-1.6z"/></svg> </button> <button class="btn btn-copy"> <svg class="clipboard show" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg> <svg class="clipboard-done" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" class="bi bi-clipboard-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg> </button> <button class="btn btn-save"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg> </button> <button class="btn btn-save-image"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" viewBox="0 0 16 16"><path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/><path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54A.505.505 0 0 1 1 12.5v-9a.5.5 0 0 1 .5-.5h13z"/></svg> </button> <div class="stamp"></div>
In CSS:
body { margin: 60px 20px; height: calc(100vh - 120px); background: #111; } svg#canvas { width: 100%; height: 100%; } .btn { display: flex; border: none; position: absolute; right: 10px; background: #fff; padding: 8px; border-radius: 4px; box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 5%); } .btn:hover { cursor: pointer; background: #00f; } .btn:hover svg { fill: #fff; } .btn:focus { outline: none; } .btn-generate { top: 10px; } .btn-copy { top: 50px; } .btn-save { top: 90px; } .btn-save-image { top: 130px; } .btn-generate svg, .btn-copy svg, .btn-save svg, .btn-image svg{ display: block; } .btn-copy svg { display: none; } .btn-copy svg.show { display: block; } @media only screen and (max-width: 767px) { .btn { top: 10px; } .btn-generate { right: 10px; } .btn-copy { right: 50px; } .btn-save { right: 90px; } .btn-save-image { right: 130px; } } .stamp { text-align: center; font-family: Helvetica; font-size: 14px; color: #fff; letter-spacing: 2px; display: block; position: absolute; bottom: 20px; left: 0; width: 100%; }
And In Javascript:
import copy from "https://cdn.skypack.dev/[email protected]"; //Set up Canvas var w = 1000; var h = 1414; var canvas = SVG('#canvas').css('background', 'transparent'); canvas.viewbox(0, 0, w, h); //Set up random factors var artworkID; var layer0_gw, layer0_gh, layer0_gc, layer1_gc, layer1_gc2, layer2_gw, layer2_gh, layer2_gc, app_cs, app_csSeed; //Set up colour scheme var cscheme = new Array; //cscheme[0] = ["#FC0243","#DB7C8E","#D0A7A8","#C6CBBE","#BFE4CD"]; //cscheme[1] = ["#69D2E7","#A7DBD8","#E0E4CC","#F38630","#FA6900"]; //cscheme[2] = ["#AB15BD","#2EB4C4","#0DDD9D","#B3F064","#ECEFCE"]; //cscheme[3] = ["#393463","#7CA667","#9BCC08","#BFE632","#FBF714"]; //cscheme[4] = ["#AAFF00","#FFAA00","#FF00AA","#AA00FF","#00AAFF"]; //Neon set cscheme[0] = ["#FF5200","#D43E40","#A92980","#7D15BF","#5200FF"]; cscheme[1] = ["#FF0066","#FFB300","#B0FF05","#00FFC8","#708D91"]; cscheme[2] = ["#FF00FF","#EB00FF","#C200FF","#9900FF","#7A00FF"]; cscheme[3] = ["#C8E801","#D3B500","#FB5E0D","#F91A37","#B40E62"]; //Rendering generate(); function generate() { //Setup app_cs = rand(cscheme.length); app_csSeed = rand(cscheme[app_cs].length); layer0_gw = rand(58) + 2; layer0_gh = rand(58) + 2; layer0_gc = rand(58) + 2; layer1_gc = rand(5); layer1_gc2 = rand(5); layer1_gc2 = (layer1_gc2 == layer1_gc) ? 0 : layer1_gc2; layer2_gw = rand(2) + 2; layer2_gh = rand(2) + 1; layer2_gc = rand(layer2_gw * layer2_gh); //getArt(3,2,3,18,12,50,2,1,1,4); //Start canvas.clear(); canvas.rect(w, h).fill("#000"); drawLayer1(layer1_gc); drawLayer1(layer1_gc2); drawLayer0(layer0_gw, layer0_gh, layer0_gc); drawLayer2(layer2_gw, layer2_gh, layer2_gc); drawStamp(layer1_gc2, layer1_gc, layer2_gw, layer2_gh, layer2_gc, layer0_gw, layer0_gh, layer0_gc, app_cs, app_csSeed); } function getArt(a, b, c, d, e, f, g, h, i, j) { layer2_gw = a; layer2_gh = b; layer2_gc = c; layer0_gw = d; layer0_gh = e; layer0_gc = f; layer1_gc2 = g; layer1_gc = h; app_cs = i; app_csSeed = j; } //Display artwork stamp function drawStamp(rf9, rf8, rf7, rf6, rf5, rf4, rf3, rf2, rf1, rf0) { artworkID = num(rf7)+num(rf6)+num(rf5)+"-"+num(rf4)+num(rf3)+num(rf2)+"-"+num(rf9, true)+num(rf8, true)+num(rf1, true)+num(rf0, true); document.querySelector(".stamp").innerHTML = "Ref: "+artworkID; } //Set up Layer0 - grid pattern function drawLayer0(gw, gh, gc) { var gridW = gw; var gridH = gh; var shapesID = 0; var shapesTotal = gridW * gridH; var shapes = new Array(shapesTotal); var shapeW = w / gridW; var shapeH = h / gridH; var seedCount = app_csSeed; for (var i = 1; i <= gridH; i++) { for (var j = 1; j <= gridW; j++) { shapes[shapesID] = canvas.rect(shapeW, shapeH) .fill("none") .stroke({color: cscheme[app_cs][app_csSeed], opacity: 0.2, width: 0.25}) .cx(shapeW * j - shapeW / 2) .cy(shapeH * i - shapeH / 2); if(shapesID % gc < 1){ shapes[shapesID].fill({color: cscheme[app_cs][seedCount], opacity: 1}); seedCount = (seedCount + 1) % cscheme[app_cs].length; } shapesID++; } } } //Set up Layer1 - projection triangle function drawLayer1(gc) { var gcPoly = new Array; gcPoly[0] = [0,0, 0,0, 0,0]; gcPoly[1] = [0,0, w,0, w/2,h]; gcPoly[2] = [0,h/2, w,0, w,h]; gcPoly[3] = [0,h, w/2,0, w,h]; gcPoly[4] = [0,0, w,h/2, 0,h]; var linear = canvas.gradient('linear', function(add) { add.stop({offset: 0, color: cscheme[app_cs][rand(cscheme[app_cs].length)], opacity: 1}) add.stop({offset: 1, color: cscheme[app_cs][app_csSeed], opacity: 0}) }) if(gc == 1) { linear.from(0, 1).to(0, 0); } if(gc == 3) { linear.from(0, 0).to(0, 1); } if(gc == 4) { linear.from(1, 0).to(0, 0); } var shape = canvas.polyline(gcPoly[gc]) .fill({color: linear, opacity: 1}) .cx(w/2) .cy(h/2); } //Set up Layer2 - Circular function drawLayer2(gw, gh, gc) { var gridW = gw; var gridH = gh; var shapesID = 0; var shapesTotal = gridW * gridH; var shapes = new Array(shapesTotal); var shapeW = w / gridW; var shapeH = h / gridH; for (var i = 1; i <= gridH; i++) { for (var j = 1; j <= gridW; j++) { if(shapesID == gc) { shapes[shapesID] = canvas.circle(shapeW) .fill({color: "#fff", opacity: 0.6}) .cx(shapeW * j - shapeW / 2) .cy(shapeH * i - shapeH / 2); shapes[shapesID] = canvas.circle(shapeW) .fill({color: cscheme[app_cs][app_csSeed], opacity: 1}) .cx(shapeW * j - shapeW / 2) .cy(shapeH * i - shapeH / 2) .css('mix-blend-mode', 'color-burn'); } shapesID++; } } } function rand(num) { return Math.floor(Math.random() * num); } function num(int, isSingle) { if(int.toString().length == 1 && !isSingle) { return '0'+int.toString(); }else { return int.toString(); } } //Action - Generate document.querySelector(".btn-generate").addEventListener("click", generate); //Action - Copy to clipboard //Credit to @georgedoescode https://codepen.io/georgedoescode/pen/dyNVNjG document.querySelector(".btn-copy").addEventListener("click", function() { copy(canvas.node.outerHTML); document.querySelector("svg.clipboard").classList.remove("show"); document.querySelector("svg.clipboard-done").classList.add("show"); setTimeout(function () { document.querySelector("svg.clipboard").classList.add("show"); document.querySelector("svg.clipboard-done").classList.remove("show"); }, 1500); }); //Action - Save as svg //Credit to @terabaud https://codepen.io/terabaud/pen/mdJqeYz function save() { var anchor = document.createElement('a'); anchor.setAttribute('download', 'twilight-'+artworkID+'.svg'); var code = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"".concat(canvas.viewbox(), "\">").concat(canvas.node.innerHTML, "</svg>"); anchor.setAttribute("href", "data:application/octet-stream;base64," + btoa(code)); anchor.setAttribute('target', '_blank'); return anchor; } document.querySelector(".btn-save").addEventListener('click', function() { save()['click'](); }); //Action - Save as png //Credit to https://github.com/exupero/saveSvgAsPng document.querySelector(".btn-save-image").addEventListener('click', function() { saveSvgAsPng(document.getElementById("canvas"), 'twilight-'+artworkID+".png", {encoderOptions: 1, scale: 1}); });
In Codepen:
See the Pen SVG Generative Art – CSG1 [Twilight] by John Wai (@johnwai_) on CodePen.
Please comment and share this article and wants to add more value to this article WhatsApp us.