JSFiddle - React, Tailwind, and code Playground

by linzoey

HTML

<a>click here to download this svg!</a>

CSS

body{
background-color:white;
}

JavaScript

var draw = SVG().addTo('body').size(1920, 1080)

let rect = draw.circle(17).fill('black').move(202, 102)

let line = draw.line(10, 30, 10, 0).move(210, 120)
line.stroke({ color: 'black', width: 10, linecap: 'round' })

let line1 = draw.line(10, 30, 10, 0).move(210, 155)
line1.stroke({ color: 'black', width: 6, linecap: 'round' })

//let circle = draw.circle(70).fill('green').move(245,144)

let path = draw.path('M361,107 C435,15 480,50 460,85 C450,110 475,120 445,135 S340,120 366.5,100')//S330,120 368,100
path.fill('none').move(212, 65)
path.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path1 = draw.path('M319,107 C245,15 200,50 220,85 C230,110 205,120 235,135 S340,120 313.5,100')
path1.fill('none').move(105, 65)
path1.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path2 = draw.path('M800,163 C830,175 825,235 785,235 S725,180 730,145')
path2.fill('none').move(215, 137)//.rotate(10)
path2.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path3 = draw.path('M650,163 C620,175 625,235 665,235 S725,180 720,145')
path3.fill('none').move(115, 137)//.rotate(-5)
path3.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path4 = draw.path('M160,100 C170,65 180,55 200,50')
path4.fill('none').move(213, 56)
path4.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path5 = draw.path('M160,100 C150,65 140,55 120,50')
path5.fill('none').move(167, 56)
path5.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })