<script> import Svelvet from 'svelvet'; const initialNodes = [ { id: 1, position: { x: 225, y: 10 }, data: { label: 'Add Images!' }, width: 100, height: 100, bgColor: 'white', borderColor: 'transparent', image: true, src: 'https://svelvet.io/_app/assets/Logo%201-cc7b0baf.svg' }, { id: 2, position: { x: 390, y: 180 }, data: { label: 'Mixed Anchors' }, width: 125, height: 40, bgColor: 'white', targetPosition: 'left' }, { id: 3, position: { x: 225, y: 260 }, data: { label: 'Output Node' }, width: 100, height: 40, bgColor: '#FFE4E6' }, { id: 4, position: { x: 25, y: 180 }, data: { label: 'Drag me!' }, width: 125, height: 40, bgColor: 'white', targetPosition: 'right' }, { id: 5, position: { x: 390, y: 380 }, data: { label: 'Custom Node' }, width: 125, height: 40, bgColor: '#C8FFC7', borderColor: 'transparent', borderRadius: 0 }, { id: 6, position: { x: 47.5, y: 360 }, data: { label: 'Custom Node' }, width: 80, height: 80, borderColor: '#FF4121', borderRadius: 30, bgColor: 'white', textColor: '#FF4121' } ]; const initialEdges = [ { id: 'e1-2', source: 1, target: 2, label: 'edge label' }, { id: 'e2-3', source: 2, target: 3, animate: true, label: 'animated edges' }, { id: 'e1-4', source: 1, target: 4, type: 'step', animate: true, edgeColor: '#FF4121' }, { id: 'e2-5', source: 2, target: 5, label: 'colored edges', animate: true, arrow: true, edgeColor: '#FF4121', labelBgColor: '#1F2937', labelTextColor: '#FFE4E6'}, { id: 'e2-5', source: 4, target: 6, type: 'straight' }, { id: 'e2-5',source: 3, target: 6, type: 'smoothstep', label: 'colored label', labelBgColor: '#FF4561', labelTextColor: 'white', animate: true} ]; </script> <Svelvet nodes={initialNodes} edges={initialEdges} width={600} background />