JSFiddle - React, Tailwind, and code Playground

by BlaXpirit

HTML

<svg width=70 height=120>
<line x1=10 y1=15 x2=10 y2=55 /> 
<line x1=10 y1=65 x2=10 y2=105 />
<line x1=15 y1=10 x2=55 y2=10 />
<line x1=12 y1=58 x2=58 y2=12 />
<line x1=12 y1=62 x2=58 y2=108 />
<line x1=15 y1=110 x2=55 y2=110 />
<line x1=60 y1=15 x2=60 y2=55 />
<line x1=60 y1=65 x2=60 y2=105 />
</svg>
<svg width=120 height=120>
<line x1=10 y1=65 x2=10 y2=105 />
<line x1=15 y1=10 x2=55 y2=10 />
<line x1=12 y1=58 x2=58 y2=12 />
<line x1=12 y1=62 x2=58 y2=108 />
<line x1=15 y1=110 x2=55 y2=110 />
<line x1=60 y1=65 x2=60 y2=105 />
<line x1=62 y1=12 x2=108 y2=58 />
<line x1=65 y1=60 x2=105 y2=60 />
<line x1=62 y1=108 x2=108 y2=62 />
<line x1=110 y1=65 x2=110 y2=105 />
</svg>
<div id=result />

CSS

line {
    stroke: #000000;
    stroke-width: 10;
    stroke-linecap: round;
}

CoffeeScript

$('line').click ->
    if $(this).css('opacity')=='1'
        $(this).css('opacity': 0.2)
    else
        $(this).css('opacity': 1)
    result = ''
    $('svg').each ->
        $(this).find('line').each ->
            if $(this).css('opacity')=='1'
                result += '1'
            else
                result += '0'
        result += ' '
    $('#result').text(result)
.click()