{"componentChunkName":"component---src-templates-edit-artwork-js","path":"/artwork/bloks","result":{"data":{"artworksJson":{"id":"0adb5462-5bad-54b6-bec2-d9869eafb6cb","name":"Bloks","description":"Semi circle geometric pattern with striped accents.","grid":{"default":"6x4","options":["3x2","6x4","9x6","12x8","15x10"]},"palette":["#FFFFFF","#3B3F45","#3FFFB2","#3EECFF","#97F4FF","#FF3D8B"],"slug":"bloks","frequency":{"default":0.6,"values":[0.2,0.4,0.6,0.8,1],"step":0.2,"replace":"${shapeFrequency}"},"circularity":null,"shadow":{"default":false,"code":"-webkit-box-shadow:0 0 40px rgba(0,0,0,0.2); box-shadow:0 0 40px rgba(0,0,0,0.2);","replace":"${shadow}"},"roundedCorners":null,"customText":null,"code":{"style":"/* set custom colors and inject z-index for the specific color to use for association */ --randomColor: @p(var(--color1), var(--color2), var(--color3), var(--color4), var(--color5)); --rule: ( -webkit-transform:rotate(@pick(90deg, 180deg, 270deg, 360deg)); transform:rotate(@pick(90deg, 180deg, 270deg, 360deg)); /*Frequency options of 0.2, 0.4, 0.6, 0.8, 1.0 */ @random(${shapeFrequency}) { background: var(--randomColor); -webkit-clip-path: @pick(circle(50% at 50% 50%), polygon(0 0, 0% 100%, 100% 100%), polygon(0 0, 100% 0, 100% 100%, 0% 100%)); clip-path: @pick(circle(50% at 50% 50%), polygon(0 0, 0% 100%, 100% 100%), polygon(0 0, 100% 0, 100% 100%, 0% 100%)); -webkit-transition: ease @rand(200ms, 600ms); transition: ease @rand(200ms, 600ms); } /*Frequency options of 0.2, 0.4, 0.6, 0.8, 1.0 */ @random(${shapeFrequency}) { background: var(--randomColor); border-radius: 200px 200px 0px 0px; -webkit-clip-path:none; clip-path:none; /* On or off option for displaying box shadows */ ${shadow} -webkit-transition: ease @rand(200ms, 600ms); transition: ease @rand(200ms, 600ms); } );","doodle":":doodle { overflow:hidden; text-align:center; box-sizing:border-box } :container { background: var(--color0); overflow:hidden; }"}}},"pageContext":{"id":"0adb5462-5bad-54b6-bec2-d9869eafb6cb"}}}