{"componentChunkName":"component---src-templates-edit-artwork-js","path":"/artwork/fiesta","result":{"data":{"artworksJson":{"id":"ae8e6805-058f-5f40-b064-0df54c62df89","name":"Fiesta","description":"Isosceles right triangles are randomly placed to balance stability with a bit of mystery and interest.","grid":{"default":"6x4","options":["3x2","6x4","9x6","12x8","15x10"]},"palette":["#FFFFFF","#D89FFF","#3EECFF","#3E8BFF","#646D7B","#3FFFB2"],"slug":"fiesta","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":"/* Random color generator variable */ --randomColor: @p(var(--color1), var(--color2), var(--color3), var(--color4), var(--color5)); --rule: ( /* Hack to remove hairline gaps that shows up when using polygons */ margin:-1px 0 0 -1px; @col(1) { margin-left:0; } @row(1) { margin-top:0; } /*Frequency options of 0.2, 0.4, 0.6, 0.8, 1.0 */ @random (${shapeFrequency}) { background-color: var(--randomColor); -webkit-clip-path: polygon(@pick( '100% 0, 50% 50%, 100% 100%', '0 0, 50% 50%, 0 100%', '100% 0, 50% 50%, 0 0', '100% 100%, 50% 50%, 0 100%', '50% 0%, 100% 50%, 50% 100%, 0% 50%', '0 0, 100% 0, 100% 100%, 0% 100%' )); clip-path: polygon(@pick( '100% 0, 50% 50%, 100% 100%', '0 0, 50% 50%, 0 100%', '100% 0, 50% 50%, 0 0', '100% 100%, 50% 50%, 0 100%', '50% 0%, 100% 50%, 50% 100%, 0% 50%', '0 0, 100% 0, 100% 100%, 0% 100%' )); } /*Frequency options of 0.2, 0.4, 0.6, 0.8, 1.0 */ @random (${shapeFrequency}) { :before { content: ''; position:absolute; background: var(--randomColor); @size: 75%; @shape: @pick(circle, rhombus); -webkit-transform:rotate(@pick(90deg, 180deg)); transform:rotate(@pick(90deg, 180deg)); -webkit-transition: ease @rand(200ms, 600ms); transition: ease @rand(200ms, 600ms); } } @random (0.4) { :after { content: ''; position:absolute; background: var(--randomColor); @size: 50%; } } );","doodle":":doodle { text-align:center; box-sizing:border-box } :container { background:var(--color0); overflow:hidden; }"}}},"pageContext":{"id":"ae8e6805-058f-5f40-b064-0df54c62df89"}}}