JSFiddle - React, Tailwind, and code Playground

by szym

HTML

<script src="https://cdn.jsdelivr.net/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id='paper' width='400' height='400'></svg>

JavaScript

var paper = Snap('#paper');

var outline = paper.rect(0, 0, 100, 190, 15);
var screen = paper.rect(10, 20, 80, 140);
var button = paper.circle(50, 175, 10);

var phone = paper.g(outline, screen, button);

var style = { fill: '#ffffff', stroke: '#000000'};
//outline.attr({fill: '#cccccc'})
phone.attr(style);

phone.transform('scale(0.707 1) skewY(30)');


var p2 = phone.clone();

p2.transform('scale(0.8)');

phone.append(p2);