{"componentChunkName":"component---src-templates-edit-artwork-js","path":"/artwork/terrain","result":{"data":{"artworksJson":{"id":"7083729c-a303-56f7-ba8e-18b11b00217b","name":"Terrain","description":"A top view of randomly generated lines and squares paints a simplistic view of cities.","grid":{"default":"6x4","options":["3x2","6x4","9x6","12x8","15x10"]},"palette":["#FFFFFF","#CED3D9","#FF3D8B","#3FFFB2","#275AA6","#3EECFF"],"slug":"terrain","frequency":{"default":0.6,"values":[0.2,0.4,0.6,0.8,1],"step":0.2,"replace":"${shapeFrequency}"},"circularity":null,"shadow":null,"roundedCorners":null,"customText":null,"code":{"style":"/* set custom colors and inject z-index for the specific color to use for association */ --randomColor: @p(var(--color2), var(--color3), var(--color4), var(--color5)); --rule: ( /*Frequency options of 0.2, 0.4, 0.6, 0.8, 1.0 */ @random(0.6) { :after { content: ''; background: var(--randomColor); @size: @rand(8px, 32px); -webkit-clip-path: @pick(polygon(50% 0%, 0% 100%, 100% 100%), circle(50% at 50% 50%), polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)); clip-path: @pick(polygon(50% 0%, 0% 100%, 100% 100%), circle(50% at 50% 50%), polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)); -webkit-transform:rotate(@pick(0deg, 360deg)); transform:rotate(@pick(0deg, 360deg)); -webkit-transition: transform ease @rand(200ms, 600ms); transition: transform ease @rand(200ms, 600ms); } } /*Frequency options of 0.2, 0.4, 0.6, 0.8, 1.0 */ @random(0.6) { -webkit-box-shadow:0 -1px 0 var(--color1); box-shadow:0 -1px 0 var(--color1); } /*Frequency options of 0.2, 0.4, 0.6, 0.8, 1.0 */ @random(0.6) { -webkit-box-shadow:-1px 0 0 var(--color1); box-shadow:-1px 0 0 var(--color1); } );","doodle":":doodle { overflow:hidden; text-align:center; box-sizing:border-box } :container { background: var(--color0); overflow:hidden; }"}}},"pageContext":{"id":"7083729c-a303-56f7-ba8e-18b11b00217b"}}}