JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<svg width="400px" height="300px" viewBox="0 0 400 300">
<g style="stroke: gray; stroke-dasharray: 4 4;">
<line x1="0" y1="0" x2="200" y2="0"/>
<line x1="20" y1="0" x2="20" y2="90"/>
<line x1="120" y1="0" x2="120" y2="90"/>
</g>
<g transform="translate(0, 0)">
<g transform="skewX(30)">
<polyline points="50 0, 0 0, 0 50"
style="fill: none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewX</text>
</g>
</g>
<g transform="translate(120, 0)">
<g transform="skewY(30)">
<polyline points="50 0, 0 0, 0 50"
style="fill: none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewY</text>
</g>
</g>
<g style="fill:none; stroke: black">
<path d="M 30 30 L 55 5 L 80 30 L 55 55 Z"/>
<path d="M 125,75 A100,50,0,0,1 225,125 "/> <!-- b -->
<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/>
<!-- light blue ellipse -->
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/>
<!-- large light red semicircle fills upper half,
followed by small light red semicircle that dips into
lower-left half of symbol -->
<path d="M 302 152 A 150 120, 0, 1, 0, 2 152
A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;"/>
<!-- light blue semicircle rises into upper-right half of symbol -->
<path d="M 152 152 A 75 60, 0, 1, 1, 302 152" style="fill: #cceeff;"/>
</g>
</svg>
<span style='font-size:15pt;'>font</span>

CSS

polyline {
  stroke: green;