JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<div id="ds"  style="background-color: #008CD2;width: 320px;text-align: center; height: 274px"> 
    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="290" height="274">
    <defs id="SvgjsDefs4721"></defs>
    <g id="dsa" rel="mainfill" name="main_text" feature="main_text" xmlns:name="mainText_mainfill" groupname="main_text" fill="#ffffff" transform="translate(0, 125) scale(4.251181811455188)"><path   d="M12.98 23.7 q0 0.12 -0.09 0.21 t-0.21 0.09 q-0.24 0 -0.3 -0.2 l-5.82 -14.68 l-0.66 1.7 q0.08 0.16 0.34 0.8 t0.64 1.57 t0.82 2.06 t0.9 2.29 t0.89 2.26 t0.76 1.96 t0.53 1.39 t0.2 0.55 q0 0.22 -0.2 0.28 q-0.04 0 -0.06 0.01 t-0.06 0.01 q-0.2 0 -0.28 -0.2 l-4.8 -12.12 l-4.66 12.12 q-0.08 0.2 -0.3 0.2 q-0.04 0 -0.05 -0.01 t-0.05 -0.01 q-0.2 -0.06 -0.2 -0.3 q0 -0.02 0.24 -0.66 t0.63 -1.66 t0.9 -2.34 t1.04 -2.71 t1.06 -2.75 t0.96 -2.49 t0.73 -1.9 t0.38 -0.99 q0.08 -0.18 0.3 -0.18 t0.28 0.18 q0.08 0.22 0.39 0.99 t0.75 1.9 t0.99 2.49 t1.1 2.75 t1.08 2.71 t0.93 2.35 t0.65 1.67 t0.25 0.66 z M26.96 8.3 q0 0.04 -0.25 0.68 t-0.65 1.67 t-0.92 2.34 t-1.08 2.7 t-1.1 2.75 t-0.99 2.48 t-0.75 1.89 t-0.38 0.99 q-0.08 0.2 -0.28 0.2 q-0.06 -0.04 -0.15 -0.08 t-0.13 -0.12 q-0.08 -0.2 -0.38 -0.98 t-0.73 -1.9 t-0.96 -2.48 t-1.07 -2.75 t-1.04 -2.71 t-0.89 -2.34 t-0.63 -1.66 t-0.24 -0.66 q0 -0.14 0.09 -0.23 t0.21 -0.09 q0.24 0 0.3 0.2 l4.64 12.08 l4.78 -12.08 q0.06 -0.2 0.3 -0.2 q0.12 0 0.21 0.09 t0.09 0.21 q0 0.04 -0.2 0.56 t-0.53 1.37 t-0.75 1.94 t-0.88 2.24 t-0.9 2.27 t-0.81 2.05 t-0.63 1.57 t-0.34 0.82 l0.64 1.7 l5.8 -14.62 q0.06 -0.2 0.3 -0.2 q0.12 0 0.21 0.09 t0.09 0.21 z M40.34 23.66 q0 0.12 -0.08 0.23 t-0.22 0.11 l-9.8 0 q-0.14 0 -0.23 -0.1 t-0.09 -0.24 l0 -15.36 q0 -0.14 0.1 -0.22 t0.22 -0.08 l9.8 0 q0.12 0 0.21 0.09 t0.09 0.21 t-0.09 0.21 t-0.21 0.09 l-9.52 0 l0 6.22 l7.42 0 q0.12 0 0.21 0.09 t0.09 0.21 t-0.09 0.21 t-0.21 0.09 l-7.38 0 l-0.02 1.36 l7.48 0 q0.32 0 0.32 0.32 q0 0.12 -0.1 0.22 t-0.22 0.1 l-7.5 0 l0 5.9 l9.52 0 q0.12 0 0.21 0.11 t0.09 0.23 z M54.54 19.54 q0...

JavaScript

var f=10;
$('body').bind('mousewheel', function (e) {

 if(f<=0 || f>=80){
 f=10;
 }
 if (e.originalEvent.wheelDelta / 120 > 0) {
  f++;
 
  l=f/10;
 
 $('#ds').css('transform','scale('+l+')');

 
    } else {
    f--;
   
    l=f/10;
 $('#ds').css('transform','scale('+l+')');
    }
 
});