JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<label for="source">Source:</label> (<span id="lenSource">394</span> Characters)<br>
<textarea id="source" style="width:100%;" rows=10><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<path id="cycle" style="fill:none;stroke:#003200;stroke-width:40;stroke-linecap:square;" d="m 300,505 c -82.92558,0 -157.62777,-49.92665 -189.44460,-126.56645 -31.74433,-76.61664 -14.19334,-164.76648 44.43384,-223.49231 58.60253,-58.66353 146.82841,-76.17623 223.23441,-44.54324 76.69621,31.15753 126.51553,106.41538 126.58025,189.41230"/></textarea><br>
<label for="points">Points:</label><input id="points" type="number" value="2">
<button id="button" style="width:100%;">Round</button><br>
<label for="target">Rounded:</label>(<span id="lenTarget">0</span> Characters, <span id="saving">0</span>% saved)<br>
<textarea id="target" style="width:100%;" rows=10></textarea>
<script>
function getSourceLength() { return jQuery('#source').val().length }
function getTargetLength() { return jQuery('#target').val().length }
function getSaving() { return (100-(100/getSourceLength()*getTargetLength())).toFixed(2) }
function round(toRound, points) {
    return toRound.replace(/[ ][d][=]["']{1}((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']{1}/g, function(m){
        return m.replace(/[\d]*\.[\d]*/g, function(n){
            return +parseFloat(n).toFixed(points)
        });
    });
}

jQuery('#source').bind('input propertychange', function() {
    jQuery('#lenSource').html(getSourceLength());
});
jQuery('#button').bind('click', function() {
    jQuery('#target').val(round(jQuery('#source').val(), jQuery('#points').val()));
    jQuery('#lenTarget').html(getTargetLength());
    jQuery('#saving').html(getSaving());
});
</script>