JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<script src="https://rawgit.com/otm/svg.path.js/master/svg.path.min.js"></script>
<div id="animate" class="paper"></div>

CSS

body {
    background-color: #ffc000;
}

JavaScript

var r = 10;
var data = {
  x: 50, y: 50,
  wx: 560, wy: 100
};

var fix = {x: -7, y: 6};

var square = [
{x: 0, y: 0},
{x: 0, y: -10},
{x: 0, y: 0},
{x: -20, y: -10}
];

var svg = SVG(document.getElementById('animate'));

svg.size(700, 250);

var g = svg.group();

g
.size(700, 250)
.path()
.attr({ 
  fill: '#cca2a2'
})
.M({x: data.x + 0 + square[0].x + r + fix.x, y: data.y + 0 + square[0].y + fix.y})
.L({x: data.x + data.wx + square[1].x - r + fix.x, y: data.y + 0 + square[1].y + fix.y})
.C(
  {x: data.x + data.wx + square[1].x - r + fix.x, y: data.y + 0 + square[1].y + fix.y},
  {x: data.x + data.wx + square[1].x + fix.x, y: data.y + 0 + square[1].y + fix.y},
  {x: data.x + data.wx + square[1].x + fix.x, y: data.y + 0 + square[1].y + r + fix.y}
  )
.L({x: data.x + data.wx + square[2].x + fix.x, y: data.y + data.wy + square[2].y - r + fix.y})
.C(
  {x: data.x + data.wx + square[2].x + fix.x, y: data.y + data.wy + square[2].y - r + fix.y},
  {x: data.x + data.wx + square[2].x + fix.x, y: data.y + data.wy + square[2].y + fix.y},
  {x: data.x + data.wx + square[2].x - r + fix.x, y: data.y + data.wy + square[2].y + fix.y}
  )
.L({x: data.x + 0 + square[3].x + r + fix.x, y: data.y + data.wy + square[3].y + fix.y})
.C(
  {x: data.x + 0 + square[3].x + r + fix.x, y: data.y + data.wy + square[3].y + fix.y},
  {x: data.x + 0 + square[3].x + fix.x, y: data.y + data.wy + square[3].y + fix.y},
  {x: data.x + 0 + square[3].x + fix.x, y: data.y + data.wy + square[3].y - r + fix.y}
  )
.L({x: data.x + 0 + square[0].x + fix.x, y: data.y + 0 + square[0].y + r + fix.y})
.C(
  {x: data.x + 0 + square[0].x + fix.x, y: data.y + 0 + square[0].y + r + fix.y},
  {x: data.x + 0 + square[0].x + fix.x, y: data.y + 0 + square[0].y + fix.y},
  {x: data.x + 0 + square[0].x + r + fix.x, y: data.y + 0 + square[0].y + fix.y}
  )
.L({x: data.x + data.wx + square[1].x - r + fix.x, y: data.y + 0 + square[1].y + fix.y})
.Z();

g
.size(700, 200)
.path()
.attr({ 
  fill: '#fff'
})
.M({x: data.x + 0 +...