{"componentChunkName":"component---src-templates-edit-artwork-js","path":"/artwork/ring","result":{"data":{"artworksJson":{"id":"19809c63-2ddb-5a77-bdf9-20705cd006c0","name":"Ring","description":"A top view of randomly generated lines and squares paints a simplistic view of cities.","grid":{"default":"3x2","options":["3x2","6x4","9x6","12x8","15x10"]},"palette":["#9EFFD8","#FFFFFF","#9EFFD8","#232529"],"slug":"ring","frequency":{"default":1,"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(--color1), var(--color2)); --rule: ( /*Frequency options of 0.2, 0.4, 0.6, 0.8, 1.0 */ @random(1.0) { -webkit-transform:rotate(@pick(45deg, 90deg, 135deg, 180deg, 225deg, 270deg, 315deg, 360deg, 0deg)); transform:rotate(@pick(45deg, 90deg, 135deg, 180deg, 225deg, 270deg, 315deg, 360deg, 0deg)); width:50%; height:50%; margin-left:25%; margin-top:25%; border-radius:320px; box-sizing:border-box; background: transparent; :before { content: ''; position:absolute; background:transparent; /* border thickness of 20px, 10px, 6.66px, 5px, 4px for 3x2, 6x4, 9x6, 12x8, 15x10 respectively */ border:20px solid var(--color3); opacity:0.4; width:100%; height:100%; left:@rand(-20%, 20%); top:@rand(-20%, 20%); border-radius:320px; box-sizing:border-box; } :after { content: ''; position:absolute; background:transparent; /* border thickness of 20px, 10px, 6.66px, 5px, 4px for 3x2, 6x4, 9x6, 12x8, 15x10 respectively */ border:20px solid var(--randomColor); width:100%; height:100%; border-radius:320px; box-sizing:border-box; } } -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":"19809c63-2ddb-5a77-bdf9-20705cd006c0"}}}