{"id":"graph-of-tides","title":"Graph of tides — SVG","category":"The graph, twice","prompt":"Design this scene as a KNOWLEDGE GRAPH, not code: typed nodes with configuration, motion as relation edges. An 800x600 night harbor — a moon node, three buoy nodes riding the water with individually-tempoed bounce animations, a lighthouse whose beam node ROTATES, two gulls as small nodes on orbits relations around the lighthouse with different radii, speeds and phases, ten star nodes each pulsing at its own speed, and a caption node. Every motion must come from item animations or relations — the graph IS the design.","designedBy":{"provider":"xai","model":"grok-4.3","inference":{"inputTokens":396324,"outputTokens":5396,"costUsd":0,"inPerMTokUsd":1.25,"outPerMTokUsd":2.5}},"render":{"jobId":"rnd_1788357859667_tsop0r","credits":2,"priceUsd":0.03,"format":"svg"},"howToReproduce":{"renderApi":"POST /v1/renders with `renderRequest` below as the body (Authorization: Bearer <your pp_sa_… key>).","editor":"/gallery/graph-of-tides/editor opens this piece live in the studio.","codeConsole":"/gallery/graph-of-tides.js is this piece as PinePaper code — paste it into the editor's AI code console."},"renderRequest":{"scene":{"canvas":{"width":800,"height":600},"items":[{"id":"moon","type":"path","x":652,"y":120,"fill":"#fbbf24","stroke":"#7c3aed","strokeWidth":2,"path":"M -35 0 C -35 -19 -19 -35 0 -35 C 19 -35 35 -19 35 0 C 35 19 19 35 0 35 C -19 35 -35 19 -35 0 Z","closed":true},{"id":"lighthouse_base","type":"path","x":400,"y":380,"fill":"#271b4b","stroke":"#38bdf8","strokeWidth":3,"path":"M -25 60 L -20 -60 L 20 -60 L 25 60 Z","closed":true},{"id":"lighthouse_top","type":"path","x":400,"y":288,"fill":"#7c3aed","stroke":"#38bdf8","strokeWidth":3,"path":"M -30 22.5 L 0 -22.5 L 30 22.5 Z","closed":true},{"id":"lighthouse_light","type":"path","x":400,"y":276,"fill":"#fbbf24","stroke":"#fbbf24","strokeWidth":2,"path":"M -8 6 L 8 6 L 0 -6 Z","closed":true,"animation":{"type":"rotate","durationMs":5000},"animationType":"rotate","animationSpeed":0.4},{"id":"buoy1","type":"path","x":220,"y":488.875,"fill":"#38bdf8","stroke":"#7c3aed","strokeWidth":2,"path":"M -15 2.625 C -15 -12.375 15 -12.375 15 2.625 C 10 10.625 -10 10.625 -15 2.625 Z","closed":true,"animation":{"type":"bounce","durationMs":2222},"animationType":"bounce","animationSpeed":0.9},{"id":"buoy2","type":"path","x":380,"y":508.875,"fill":"#38bdf8","stroke":"#7c3aed","strokeWidth":2,"path":"M -15 2.625 C -15 -12.375 15 -12.375 15 2.625 C 10 10.625 -10 10.625 -15 2.625 Z","closed":true,"animation":{"type":"bounce","durationMs":1818},"animationType":"bounce","animationSpeed":1.1,"animationDelay":0.2},{"id":"buoy3","type":"path","x":552,"y":500.875,"fill":"#38bdf8","stroke":"#7c3aed","strokeWidth":2,"path":"M -15 2.625 C -15 -12.375 15 -12.375 15 2.625 C 10 10.625 -10 10.625 -15 2.625 Z","closed":true,"animation":{"type":"bounce","durationMs":2667},"animationType":"bounce","animationSpeed":0.75,"animationDelay":0.4},{"id":"gull1_body","type":"path","x":324,"y":220.01457638535848,"fill":"#e2e8f0","stroke":"#1f2937","strokeWidth":2,"path":"M -22 2.9854 C -14 -9.0146 -6 -13.0146 6 -11.0146 C 14 -9.0146 20 -3.0146 22 2.9854 C 16 8.9854 6 12.9854 -6 10.9854 C -16 8.9854 -20 6.9854 -22 2.9854 Z","closed":true},{"id":"gull1_wing","type":"path","x":308.572339166759,"y":196,"fill":"#94a3b8","stroke":"#1f2937","strokeWidth":2,"path":"M -2.5723 12 C -10.5723 0 -8.5723 -10 1.4277 -14 C 7.4277 -6 9.4277 4 5.4277 14 Z","closed":true},{"id":"gull2_body","type":"path","x":484,"y":240.01457638535848,"fill":"#e2e8f0","stroke":"#1f2937","strokeWidth":2,"path":"M -22 2.9854 C -14 -9.0146 -6 -13.0146 6 -11.0146 C 14 -9.0146 20 -3.0146 22 2.9854 C 16 8.9854 6 12.9854 -6 10.9854 C -16 8.9854 -20 6.9854 -22 2.9854 Z","closed":true},{"id":"gull2_wing","type":"path","x":468.572339166759,"y":216,"fill":"#94a3b8","stroke":"#1f2937","strokeWidth":2,"path":"M -2.5723 12 C -10.5723 0 -8.5723 -10 1.4277 -14 C 7.4277 -6 9.4277 4 5.4277 14 Z","closed":true},{"id":"caption","type":"text","x":400,"y":560,"fill":"#fbbf24","text":"NIGHT HARBOR","fontSize":25,"fontFamily":"Inter","animation":{"type":"pulse","durationMs":6667},"animationType":"pulse","animationSpeed":0.3},{"id":"star1","type":"star","x":120,"y":80,"fill":"#fbbf24","animationType":"pulse","animationSpeed":0.8,"animation":{"type":"pulse","durationMs":2500},"radius":4,"innerRadius":2,"starPoints":5},{"id":"star2","type":"star","x":200,"y":60,"fill":"#fbbf24","animationType":"pulse","animationSpeed":1.2,"animation":{"type":"pulse","durationMs":1667},"radius":3,"innerRadius":1.5,"starPoints":5},{"id":"star3","type":"star","x":300,"y":92,"fill":"#fbbf24","animationType":"pulse","animationSpeed":0.6,"animation":{"type":"pulse","durationMs":3333},"radius":5,"innerRadius":2.5,"starPoints":5},{"id":"star4","type":"star","x":452,"y":52,"fill":"#fbbf24","animationType":"pulse","animationSpeed":1.5,"animation":{"type":"pulse","durationMs":1333},"radius":3.5,"innerRadius":1.8,"starPoints":5},{"id":"star5","type":"star","x":552,"y":76,"fill":"#fbbf24","animationType":"pulse","animationSpeed":0.9,"animation":{"type":"pulse","durationMs":2222},"radius":4,"innerRadius":2,"starPoints":5},{"id":"star6","type":"star","x":652,"y":56,"fill":"#fbbf24","animationType":"pulse","animationSpeed":1.1,"animation":{"type":"pulse","durationMs":1818},"radius":3,"innerRadius":1.5,"starPoints":5},{"id":"star7","type":"star","x":720,"y":96,"fill":"#fbbf24","animationType":"pulse","animationSpeed":0.7,"animation":{"type":"pulse","durationMs":2857},"radius":4.5,"innerRadius":2.2,"starPoints":5},{"id":"star8","type":"star","x":152,"y":140,"fill":"#fbbf24","animationType":"pulse","animationSpeed":1.3,"animation":{"type":"pulse","durationMs":1538},"radius":3,"innerRadius":1.5,"starPoints":5},{"id":"star9","type":"star","x":680,"y":120,"fill":"#fbbf24","animationType":"pulse","animationSpeed":0.5,"animation":{"type":"pulse","durationMs":4000},"radius":4,"innerRadius":2,"starPoints":5},{"id":"star10","type":"star","x":400,"y":40,"fill":"#fbbf24","animationType":"pulse","animationSpeed":1.4,"animation":{"type":"pulse","durationMs":1429},"radius":3.5,"innerRadius":1.8,"starPoints":5},{"id":"gull1_body__anchor","type":"group","x":324,"y":220.01457638535848},{"id":"gull1_wing__anchor","type":"group","x":308.572339166759,"y":196},{"id":"gull2_body__anchor","type":"group","x":484,"y":240.01457638535848},{"id":"gull2_wing__anchor","type":"group","x":468.572339166759,"y":216}],"relations":[{"sourceId":"gull1_body","targetId":"gull1_body__anchor","type":"orbits","speed":0.6,"radius":90,"phase":0,"params":{"radius":90,"speed":0.6,"direction":"clockwise","phase":0}},{"sourceId":"gull1_wing","targetId":"gull1_wing__anchor","type":"orbits","speed":0.6,"radius":95,"phase":0.1,"params":{"radius":95,"speed":0.6,"direction":"clockwise","phase":0.1}},{"sourceId":"gull2_body","targetId":"gull2_body__anchor","type":"orbits","speed":0.45,"radius":130,"phase":1.2,"params":{"radius":130,"speed":0.45,"direction":"counterclockwise","phase":1.2}},{"sourceId":"gull2_wing","targetId":"gull2_wing__anchor","type":"orbits","speed":0.45,"radius":135,"phase":1.3,"params":{"radius":135,"speed":0.45,"direction":"counterclockwise","phase":1.3}}],"generators":[],"media":[],"skeletons":[],"background":"#05070f"},"exportProfile":{"format":"svg","resolution":"1080p","fps":30,"durationSeconds":6},"source":{"prompt":"Design this scene as a KNOWLEDGE GRAPH, not code: typed nodes with configuration, motion as relation edges. An 800x600 night harbor — a moon node, three buoy nodes riding the water with individually-tempoed bounce animations, a lighthouse whose beam node ROTATES, two gulls as small nodes on orbits relations around the lighthouse with different radii, speeds and phases, ten star nodes each pulsing at its own speed, and a caption node. Every motion must come from item animations or relations — the graph IS the design.","provider":"xai","model":"grok-4.3","app":"gallery-reproduction"}},"ops":[{"tool":"pinepaper_set_canvas_size","args":{"width":800,"height":600}},{"tool":"pinepaper_set_background_color","args":{"color":"#05070f"}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":652,"y":120},"properties":{"id":"moon","closed":true,"fillColor":"#e0f0ff","strokeColor":"#64748b","strokeWidth":2,"pathData":"M -40 0 C -40 -22 -22 -40 0 -40 C 22 -40 40 -22 40 0 C 40 22 22 40 0 40 C -22 40 -40 22 -40 0 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":200,"y":480},"properties":{"id":"lighthouse_base","closed":true,"fillColor":"#1e2937","strokeColor":"#475569","strokeWidth":3,"pathData":"M -30 60 L -25 -60 L 25 -60 L 30 60 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":200,"y":420},"properties":{"id":"lighthouse_top","closed":true,"fillColor":"#334155","strokeColor":"#475569","strokeWidth":3,"pathData":"M -35 0.5 L 0 -24.5 L 35 0.5 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":200,"y":380},"properties":{"id":"lighthouse_light","closed":true,"fillColor":"#fbbf24","strokeColor":"#f59e0b","strokeWidth":2,"pathData":"M -15 10 L 15 10 L 15 -10 L -15 -10 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":280,"y":452},"properties":{"id":"buoy1","closed":true,"fillColor":"#1e67af","strokeColor":"#3b82f6","strokeWidth":2,"pathData":"M -12 9 C -12 -7 12 -7 12 9 C 12 19 0 23 -12 19 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":452,"y":520},"properties":{"id":"buoy2","closed":true,"fillColor":"#1e67af","strokeColor":"#3b82f6","strokeWidth":2,"pathData":"M -12 9 C -12 -7 12 -7 12 9 C 12 19 0 23 -12 19 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":600,"y":492},"properties":{"id":"buoy3","closed":true,"fillColor":"#1e67af","strokeColor":"#3b82f6","strokeWidth":2,"pathData":"M -12 9 C -12 -7 12 -7 12 9 C 12 19 0 23 -12 19 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":152,"y":200},"properties":{"id":"gull1_body","closed":true,"fillColor":"#e2e8f0","strokeColor":"#64748b","strokeWidth":2,"pathData":"M -18 6 C -10 -6 10 -6 18 6 C 10 14 -10 14 -18 6 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":152,"y":196},"properties":{"id":"gull1_wing","closed":true,"fillColor":"#cbd5e1","strokeColor":"#64748b","strokeWidth":1.5,"pathData":"M 2 1 C -6 -11 6 -17 14 -9"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":280,"y":180},"properties":{"id":"gull2_body","closed":true,"fillColor":"#e2e8f0","strokeColor":"#64748b","strokeWidth":2,"pathData":"M -18 6 C -10 -6 10 -6 18 6 C 10 14 -10 14 -18 6 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":280,"y":176},"properties":{"id":"gull2_wing","closed":true,"fillColor":"#cbd5e1","strokeColor":"#64748b","strokeWidth":1.5,"pathData":"M 2 1 C -6 -11 6 -17 14 -9"}}},{"tool":"pinepaper_create_item","args":{"itemType":"text","position":{"x":400,"y":560},"properties":{"id":"caption","content":"NIGHT HARBOR","fontSize":25,"color":"#94a3b8","fontFamily":"Inter"}}},{"tool":"pinepaper_delete_item","args":{"itemId":"moon"}},{"tool":"pinepaper_delete_item","args":{"itemId":"lighthouse_base"}},{"tool":"pinepaper_delete_item","args":{"itemId":"lighthouse_top"}},{"tool":"pinepaper_delete_item","args":{"itemId":"lighthouse_light"}},{"tool":"pinepaper_delete_item","args":{"itemId":"buoy1"}},{"tool":"pinepaper_delete_item","args":{"itemId":"buoy2"}},{"tool":"pinepaper_delete_item","args":{"itemId":"buoy3"}},{"tool":"pinepaper_delete_item","args":{"itemId":"gull1_body"}},{"tool":"pinepaper_delete_item","args":{"itemId":"gull1_wing"}},{"tool":"pinepaper_delete_item","args":{"itemId":"gull2_body"}},{"tool":"pinepaper_delete_item","args":{"itemId":"gull2_wing"}},{"tool":"pinepaper_delete_item","args":{"itemId":"caption"}},{"tool":"pinepaper_set_canvas_size","args":{"width":800,"height":600}},{"tool":"pinepaper_set_background_color","args":{"color":"#05070f"}},{"tool":"pinepaper_set_canvas_size","args":{"width":800,"height":600}},{"tool":"pinepaper_set_background_color","args":{"color":"#05070f"}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":652,"y":120},"properties":{"id":"moon","closed":true,"fillColor":"#fbbf24","strokeColor":"#7c3aed","strokeWidth":2,"pathData":"M -35 0 C -35 -19 -19 -35 0 -35 C 19 -35 35 -19 35 0 C 35 19 19 35 0 35 C -19 35 -35 19 -35 0 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":400,"y":380},"properties":{"id":"lighthouse_base","closed":true,"fillColor":"#271b4b","strokeColor":"#38bdf8","strokeWidth":3,"pathData":"M -25 60 L -20 -60 L 20 -60 L 25 60 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":400,"y":312},"properties":{"id":"lighthouse_top","closed":true,"fillColor":"#7c3aed","strokeColor":"#38bdf8","strokeWidth":3,"pathData":"M -30 -1.5 L 0 -46.5 L 30 -1.5 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":400,"y":280},"properties":{"id":"lighthouse_light","closed":true,"fillColor":"#fbbf24","strokeColor":"#fbbf24","strokeWidth":2,"pathData":"M -8 2 L 8 2 L 0 -10 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":220,"y":480},"properties":{"id":"buoy1","closed":true,"fillColor":"#38bdf8","strokeColor":"#7c3aed","strokeWidth":2,"pathData":"M -15 11.5 C -15 -3.5 15 -3.5 15 11.5 C 10 19.5 -10 19.5 -15 11.5 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":380,"y":500},"properties":{"id":"buoy2","closed":true,"fillColor":"#38bdf8","strokeColor":"#7c3aed","strokeWidth":2,"pathData":"M -15 11.5 C -15 -3.5 15 -3.5 15 11.5 C 10 19.5 -10 19.5 -15 11.5 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":552,"y":492},"properties":{"id":"buoy3","closed":true,"fillColor":"#38bdf8","strokeColor":"#7c3aed","strokeWidth":2,"pathData":"M -15 11.5 C -15 -3.5 15 -3.5 15 11.5 C 10 19.5 -10 19.5 -15 11.5 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":320,"y":220},"properties":{"id":"gull1_body","closed":true,"fillColor":"#e2e8f0","strokeColor":"#1f2937","strokeWidth":2,"pathData":"M -18 3 C -10 -9 -2 -13 10 -11 C 18 -9 24 -3 26 3 C 20 9 10 13 -2 11 C -12 9 -16 7 -18 3 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":304,"y":208},"properties":{"id":"gull1_wing","closed":true,"fillColor":"#94a3b8","strokeColor":"#1f2937","strokeWidth":2,"pathData":"M 2 0 C -6 -12 -4 -22 6 -26 C 12 -18 14 -8 10 2 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":480,"y":240},"properties":{"id":"gull2_body","closed":true,"fillColor":"#e2e8f0","strokeColor":"#1f2937","strokeWidth":2,"pathData":"M -18 3 C -10 -9 -2 -13 10 -11 C 18 -9 24 -3 26 3 C 20 9 10 13 -2 11 C -12 9 -16 7 -18 3 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"path","position":{"x":464,"y":228},"properties":{"id":"gull2_wing","closed":true,"fillColor":"#94a3b8","strokeColor":"#1f2937","strokeWidth":2,"pathData":"M 2 0 C -6 -12 -4 -22 6 -26 C 12 -18 14 -8 10 2 Z"}}},{"tool":"pinepaper_create_item","args":{"itemType":"text","position":{"x":400,"y":560},"properties":{"id":"caption","content":"NIGHT HARBOR","fontSize":25,"color":"#fbbf24","fontFamily":"Inter","textAlign":"center"}}},{"tool":"pinepaper_batch_create","args":{"items":[{"type":"star","params":{"id":"star1","x":120,"y":80,"radius1":4,"radius2":2,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":0.8}},{"type":"star","params":{"id":"star2","x":200,"y":60,"radius1":3,"radius2":1.5,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":1.2}},{"type":"star","params":{"id":"star3","x":300,"y":92,"radius1":5,"radius2":2.5,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":0.6}},{"type":"star","params":{"id":"star4","x":452,"y":52,"radius1":3.5,"radius2":1.8,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":1.5}},{"type":"star","params":{"id":"star5","x":552,"y":76,"radius1":4,"radius2":2,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":0.9}},{"type":"star","params":{"id":"star6","x":652,"y":56,"radius1":3,"radius2":1.5,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":1.1}},{"type":"star","params":{"id":"star7","x":720,"y":96,"radius1":4.5,"radius2":2.2,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":0.7}},{"type":"star","params":{"id":"star8","x":152,"y":140,"radius1":3,"radius2":1.5,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":1.3}},{"type":"star","params":{"id":"star9","x":680,"y":120,"radius1":4,"radius2":2,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":0.5}},{"type":"star","params":{"id":"star10","x":400,"y":40,"radius1":3.5,"radius2":1.8,"points":5,"fillColor":"#fbbf24","animationType":"pulse","animationSpeed":1.4}}]}},{"tool":"pinepaper_animate","args":{"itemId":"buoy1","animationType":"bounce","speed":0.9,"intensity":0.15,"delay":0}},{"tool":"pinepaper_animate","args":{"itemId":"buoy2","animationType":"bounce","speed":1.1,"intensity":0.12,"delay":0.2}},{"tool":"pinepaper_animate","args":{"itemId":"buoy3","animationType":"bounce","speed":0.75,"intensity":0.18,"delay":0.4}},{"tool":"pinepaper_animate","args":{"itemId":"lighthouse_light","animationType":"rotate","speed":0.4,"intensity":1}},{"tool":"pinepaper_add_relation","args":{"sourceId":"gull1_body","relationType":"orbits","params":{"radius":90,"speed":0.6,"direction":"clockwise","phase":0}}},{"tool":"pinepaper_add_relation","args":{"sourceId":"gull1_wing","relationType":"orbits","params":{"radius":95,"speed":0.6,"direction":"clockwise","phase":0.1}}},{"tool":"pinepaper_add_relation","args":{"sourceId":"gull2_body","relationType":"orbits","params":{"radius":130,"speed":0.45,"direction":"counterclockwise","phase":1.2}}},{"tool":"pinepaper_add_relation","args":{"sourceId":"gull2_wing","relationType":"orbits","params":{"radius":135,"speed":0.45,"direction":"counterclockwise","phase":1.3}}},{"tool":"pinepaper_animate","args":{"itemId":"caption","animationType":"pulse","speed":0.3,"intensity":0.08}}],"license":"CC0-1.0"}