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(1000, 1000)

function butterfly (xPosition, yPosition, size){

let path = draw.path('M351,107 C435,5 480,10 460,60 C435,110 465,105 442,127 S350,105 351,107')
path.fill('white').move(210+xPosition, 50+yPosition)
path.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path1 = draw.path('M329,107 C245,5 200,10 220,60 C245,110 215,105 238,127 S330,105 329,107')
path1.fill('white').move(96+xPosition, 50+yPosition)
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(213+xPosition, 139.5+yPosition)//.rotate(10)
path2.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path3 = draw.path('M650,165.3 C620,175 625,235 665,235 S725,180 720,145')
path3.fill('none').move(116+xPosition, 138+yPosition)//.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(212.5+xPosition, 56+yPosition)
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(166.5+xPosition, 56+yPosition)
path5.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let head = draw.circle(17).fill('black').move(201.5+xPosition, 102+yPosition)

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

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

}

  butterfly (100,100,20);