Transform an image to "vector path" - html

Im trying to convert an image to whatever is this "M2 0a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2V2a2 2 0 0 0 -2 -2H2zm7.5 11h-4a0.5 0.5 0 0 1 -0.5 -0.5v-4a0.5 0.5 0 0 1 1 0v2.793l4.146 -4.147a0.5 0.5 0 0 1 0.708 0.708L6.707 10H9.5a0.5 0.5 0 0 1 0 1z"
I dont know the name sorry but if you can help me i would be veary pleased


It is an sag path attribute. You can view the corresponding svg path below.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<path d="M2 0a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2V2a2 2 0 0 0 -2 -2H2zm7.5 11h-4a0.5 0.5 0 0 1 -0.5 -0.5v-4a0.5 0.5 0 0 1 1 0v2.793l4.146 -4.147a0.5 0.5 0 0 1 0.708 0.708L6.707 10H9.5a0.5 0.5 0 0 1 0 1z"/>
</svg>

Related

The bootstrap table with detached header

I'm trying to create a simple bootstrap table from HTML and JSON input data. For some reason, however, the table header seems to form a separate table (?) with an additional first column. Why is it so?
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.css">
</head>
<body>
<div class="col-lg-9">
<table data-toggle="table" id="fragmenterTable" data-search="true" data-show-refresh="true"
data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true"
data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true"
data-click-to-select="true" data-show-pagination-switch="true" data-pagination="true"
data-page-list="[10, 25, 50, 100, all]" data-side-pagination="client">
<thead>
<th data-field="Molecule">
Molecule
</th>
<th data-field="Smiles">
Smiles
</th>
<th data-field="MolWeight">
MolWeight
</th>
<th data-field="HBA">
HBA
</th>
<th data-field="HBD">
HBD
</th>
<th data-field="TPSA">
TPSA
</th>
<th data-field="HeavyAtoms">
HeavyAtoms
</th>
<th data-field="Charge">
Charge
</th>
<th data-field="RingCount">
RingCount
</th>
<th data-field="AromaticRings">
AromaticRings
</th>
<th data-field="AliphaticRings">
AliphaticRings
</th>
<th data-field="RotatableBonds">
RotatableBonds
</th>
<th data-field="cLogP">
cLogP
</th>
<th data-field="MorganFingerprints">
MorganFingerprints
</th>
</thead>
</table>
</div>
</body>
<!-- Include jQuery and other required
files for Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript">
var in_json = 'fragments_test.json'
$(document).ready(function () {
$('#fragmenterTable').append('<tbody>');
// FETCHING DATA FROM JSON FILE
$.getJSON(in_json,
function (data) {
$.each(data.data, function (key, value) {
var row = '';
row += '<tr>';
for (i = 0; i < value.length; i++) {
if (i == 0) {
row += '<td>' + 'mol2 content' + '</td>';
} else {
row += '<td>' + value[i] + '</td>';
}
}
row += '</tr>';
$('#fragmenterTable').append(row);
});
});
$('#fragmenterTable').append('</tbody>');
});
</script>
My json file looks as follows (fragments_test.json):
{"columns":["Molecule","Smiles","MolWeight","HBA","HBD","TPSA","HeavyAtoms","Charge","RingCount","AromaticRings","AliphaticRings","RotatableBonds","cLogP","MorganFingerprints"],"data":[["CHEMBL155926\n RDKit 2D\n\n 5 4 0 0 0 0 0 0 0 0999 V2000\n 12.7500 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 13.4649 -12.5497 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.1756 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.8903 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 12.0352 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0\n 1 5 1 0\n 2 3 1 0\n 3 4 1 0\nM END\n","Cl\/C=C\/CCl",110.97,0,0,0.0,5,0,0,0,0,1,1.98,{}],["\n RDKit 2D\n\n 8 7 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 7.3288 -19.6010 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.0436 -19.1861 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.7585 -19.6010 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.0436 -18.3656 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 9.4733 -19.1861 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 7.3288 -17.9508 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 3 2 1 0\n 4 3 1 0\n 3 5 2 0\n 6 4 1 0\n 4 7 2 0\n 5 8 1 0\nM ISO 2 1 8 6 1\nM END\n","[1*]C(=O)\/C(C[8*])=N\/O",85.06,3,1,49.66,6,0,0,0,0,2,0.04,{}],["\n RDKit 2D\n\n 9 8 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 16.4212 -8.5322 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 15.7020 -8.1276 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 16.4304 -9.3574 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 14.9893 -8.5402 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 15.2835 -7.4104 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 16.1087 -7.4104 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.2766 -8.1318 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 13.5639 -8.5444 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 5 3 1 0\n 3 6 1 0\n 3 7 1 0\n 8 5 1 0\n 9 8 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)(C)CCC",113.18,1,0,17.07,8,0,0,0,0,3,2.01,{}],["\n RDKit 2D\n\n 6 5 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 9.1138 -22.8236 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.3488 -23.2242 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.8460 -23.2884 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 8.3117 -24.0895 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.6166 -22.7594 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 3 5 1 0\n 3 6 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)C",71.1,1,0,17.07,5,0,0,0,0,1,0.84,{}],["\n RDKit 2D\n\n 8 7 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n -0.0188 -0.1607 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.4313 0.5510 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.8062 -0.1607 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n -0.0188 1.2669 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.2563 0.5510 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.4313 1.9828 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.8062 1.2669 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 3 5 1 0\n 3 6 1 0\n 5 7 1 0\n 5 8 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)C(C)O",101.12,2,1,37.3,7,0,0,0,0,2,0.2,{}],["\n RDKit 2D\n\n 7 6 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 24.9472 -17.9755 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 25.6590 -17.5645 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 24.9472 -18.8018 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 26.3752 -17.9755 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 25.6590 -16.7425 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 26.3759 -18.8369 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 3 5 1 0\n 3 6 1 0\n 5 7 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)CC",85.13,1,0,17.07,6,0,0,0,0,2,1.23,{}]]}
Also, the pagination does not work, I assume it's because of the "detached" header.
Do you have any idea how to fix it?
Thank you!

You should format your json data structure to be like this:
https://examples.bootstrap-table.com/json/data1.json
where for each object will have its own fields:
[
{
"Molecule": "CHEMBL155926\n RDKit 2D\n\n 5 4 0 0 0 0 0 0 0 0999 V2000\n 12.7500 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 13.4649 -12.5497 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.1756 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.8903 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 12.0352 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0\n 1 5 1 0\n 2 3 1 0\n 3 4 1 0\nM END\n",
"Smiles": "Cl/C=C/CCl",
"MolWeight": 110.97,
"HBA": 0,
"HBD": 0,
"TPSA": 0.0,
"HeavyAtoms": 5,
"Charge": 0,
"RingCount": 0,
"AromaticRings:": 0,
"AliphaticRings": 0,
"RotatableBonds": 1,
"cLogP": 1.98,
"MorganFingerprints": {}
}
]
After that, you can use the data-url instead of the function that "organizing" the json file as:
<table data-toggle="table" id="fragmenterTable" data-search="true" data-show-refresh="true"
data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true"
data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true"
data-click-to-select="true" data-show-pagination-switch="true" data-pagination="true"
data-page-list="[10, 25, 50, 100, all]" data-side-pagination="client"
data-url="fragments_test.json">
Once you will provide bootstrap-table the correct formatted json file, it will work perfect.

Display maximum of 4 icons a row in a dynamically generated component [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am currently working on an emoji component based off of https://ngx-emoji-mart.netlify.app/.
I would like the component to take take up 100% of the parent div capacity and have a maximum of 4 items per row. What would be the best way of doing this? I have tried using flex-box but the issue is that I can't figure out how to limit the number of items per row.
My CSS code is as follows:
.emoji-anchor {
position: relative;
display: inline-block;
flex: 1 1 auto;
color: #858585;
text-align: center;
padding: 12px 4px;
overflow: hidden;
transition: color 0.1s ease-out;
margin: 0;
box-shadow: none;
background: none;
border: none;
flex-wrap: wrap;
}
.emoji-anchors {
flex-direction: row;
justify-content: space-between;
padding: 0 20px 0 25px;
line-height: 0;
}
The full code is quite lengthy to paste, so I have included it here: https://jsfiddle.net/2nxwpL8h/.
Bear in mind that the component is being created dynamically in Angular as follows:
<div class="emoji-anchors">
<ng-template ngFor let-category [ngForOf]="categories" let-idx="index" [ngForTrackBy]="trackByFn">
<span
*ngIf="category.anchor !== false"
class="emoji-anchor"
(click)="this.handleClick($event, idx)"
[class.emoji-anchor-selected]="category.name === selected"
[style.color]="category.name === selected ? color : null"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path [attr.d]="icons[category.id]" />
</svg>
<span class="emoji-anchor-bar" [style.background-color]="color"></span>
</span>
</ng-template>
</div>

Use CSS grid with 4 equal columns
.emoji-anchor {
color: #858585;
text-align: center;
padding: 12px 4px;
}
.emoji-anchors {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
<div _ngcontent-urg-c146="" class="emoji-anchors">
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24m0 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20M8 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4m8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-.8 8c-.7 1.2-1.8 2-3.3 2-1.5 0-2.7-.8-3.4-2H15m3-2H6a6 6 0 1 0 12 0"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M15.5 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-7 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m10.43-8h-.02c-.97 0-2.14.79-3.02 1.5A13.88 13.88 0 0 0 12 .99c-1.28 0-2.62.13-3.87.51C7.24.8 6.07 0 5.09 0h-.02C3.35 0 .07 2.67 0 7.03c-.04 2.47.28 4.23 1.04 5 .26.27.88.69 1.3.9.19 3.17.92 5.23 2.53 6.37.9.64 2.19.95 3.2 1.1-.03.2-.07.4-.07.6 0 1.77 2.35 3 4 3s4-1.23 4-3c0-.2-.04-.4-.07-.59 2.57-.38 5.43-1.87 5.92-7.58.4-.22.89-.57 1.1-.8.77-.76 1.09-2.52 1.05-5C23.93 2.67 20.65 0 18.93 0M3.23 9.13c-.24.29-.84 1.16-.9 1.24A9.67 9.67 0 0 1 2 7.08c.05-3.28 2.48-4.97 3.1-5.03.25.02.72.27 1.26.65A7.95 7.95 0 0 0 4 7.82c-.14.55-.4.86-.79 1.31M12 22c-.9 0-1.95-.7-2-1 0-.65.47-1.24 1-1.6v.6a1 1 0 1 0 2 0v-.6c.52.36 1 .95 1 1.6-.05.3-1.1 1-2 1m3-3.48v.02a4.75 4.75 0 0 0-1.26-1.02c1.09-.52 2.24-1.33 2.24-2.22 0-1.84-1.78-2.2-3.98-2.2s-3.98.36-3.98 2.2c0 .89 1.15 1.7 2.24 2.22A4.8 4.8 0 0 0 9 18.54v-.03a6.1 6.1 0 0 1-2.97-.84c-1.3-.92-1.84-3.04-1.86-6.48l.03-.04c.5-.82 1.49-1.45 1.8-3.1C6 6 7.36 4.42 8.36 3.53c1.01-.35 2.2-.53 3.59-.53 1.45 0 2.68.2 3.73.57 1 .9 2.32 2.46 2.32 4.48.31 1.65 1.3 2.27 1.8 3.1l.1.18c-.06 5.97-1.95 7.01-4.9 7.19m6.63-8.2l-.11-.2a7.59 7.59 0 0 0-.74-.98 3.02 3.02 0 0 1-.79-1.32 7.93 7.93 0 0 0-2.35-5.12c.53-.38 1-.63 1.26-.65.64.07 3.05 1.77 3.1 5.03.02 1.81-.35 3.22-.37 3.24"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M17 5c-1.8 0-2.9.4-3.7 1 .5-1.3 1.8-3 4.7-3a1 1 0 0 0 0-2c-3 0-4.6 1.3-5.5 2.5l-.2.2c-.6-1.9-1.5-3.7-3-3.7C8.5 0 7.7.3 7 1c-2 1.5-1.7 2.9-.5 4C3.6 5.2 0 7.4 0 13c0 4.6 5 11 9 11 2 0 2.4-.5 3-1 .6.5 1 1 3 1 4 0 9-6.4 9-11 0-6-4-8-7-8M8.2 2.5c.7-.5 1-.5 1-.5.4.2 1 1.4 1.4 3-1.6-.6-2.8-1.3-3-1.8l.6-.7M15 22c-1 0-1.2-.1-1.6-.4l-.1-.2a2 2 0 0 0-2.6 0l-.1.2c-.4.3-.5.4-1.6.4-2.8 0-7-5.4-7-9 0-6 4.5-6 5-6 2 0 2.5.4 3.4 1.2l.3.3a2 2 0 0 0 2.6 0l.3-.3c1-.8 1.5-1.2 3.4-1.2.5 0 5 .1 5 6 0 3.6-4.2 9-7 9"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24m10 11h-5c.3-2.5 1.3-4.8 2-6.1a10 10 0 0 1 3 6.1m-9 0V2a10 10 0 0 1 4.4 1.6A18 18 0 0 0 15 11h-2zm-2 0H9a18 18 0 0 0-2.4-7.4A10 10 0 0 1 11 2.1V11zm0 2v9a10 10 0 0 1-4.4-1.6A18 18 0 0 0 9 13h2zm4 0a18 18 0 0 0 2.4 7.4 10 10 0 0 1-4.4 1.5V13h2zM5 4.9c.7 1.3 1.7 3.6 2 6.1H2a10 10 0 0 1 3-6.1M2 13h5c-.3 2.5-1.3 4.8-2 6.1A10 10 0 0 1 2 13m17 6.1c-.7-1.3-1.7-3.6-2-6.1h5a10 10 0 0 1-3 6.1"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M6.5 12a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m0 3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5.5.2.5.5-.2.5-.5.5m11-3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m0 3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5.5.2.5.5-.2.5-.5.5m5-5.5l-1-.4-.1-.1h.6c.6 0 1-.4 1-1 0-1-.9-2-2-2h-.6l-.8-1.7A3 3 0 0 0 16.8 2H7.2a3 3 0 0 0-2.8 2.3L3.6 6H3a2 2 0 0 0-2 2c0 .6.4 1 1 1h.6v.1l-1 .4a2 2 0 0 0-1.4 2l.7 7.6a1 1 0 0 0 1 .9H3v1c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-1h6v1c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-1h1.1a1 1 0 0 0 1-.9l.7-7.5a2 2 0 0 0-1.3-2.1M6.3 4.9c.1-.5.5-.9 1-.9h9.5c.4 0 .8.4 1 .9L19.2 9H4.7l1.6-4.1zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.2-3H2.8l-.7-6.6.9-.4h18l.9.4-.7 6.6z"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M12 0a9 9 0 0 0-5 16.5V21s2 3 5 3 5-3 5-3v-4.5A9 9 0 0 0 12 0zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zM9 17.5a9 9 0 0 0 6 0v.8a7 7 0 0 1-3 .7 7 7 0 0 1-3-.7v-.8zm.2 3a8.9 8.9 0 0 0 2.8.5c1 0 1.9-.2 2.8-.5-.6.7-1.6 1.5-2.8 1.5-1.1 0-2.1-.8-2.8-1.5zm5.5-8.1c-.8 0-1.1-.8-1.5-1.8-.5-1-.7-1.5-1.2-1.5s-.8.5-1.3 1.5c-.4 1-.8 1.8-1.6 1.8h-.3c-.5-.2-.8-.7-1.3-1.8l-.2-1A3 3 0 0 0 7 9a1 1 0 0 1 0-2c1.7 0 2 1.4 2.2 2.1.5-1 1.3-2 2.8-2 1.5 0 2.3 1.1 2.7 2.1.2-.8.6-2.2 2.3-2.2a1 1 0 1 1 0 2c-.2 0-.3.5-.3.7a6.5 6.5 0 0 1-.3 1c-.5 1-.8 1.7-1.7 1.7"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M0 0h11v2H0zm4 11h3V6h4V4H0v2h4zm11.5 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m0-2.99a.5.5 0 0 1 0 .99c-.28 0-.5-.22-.5-.5s.22-.49.5-.49m6 5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m0 2.99a.5.5 0 0 1-.5-.5.5.5 0 0 1 1 .01.5.5 0 0 1-.5.49m.5-9l-9 9 1.51 1.5 9-9zm-5-2c2.2 0 4-1.12 4-2.5V2s.98-.16 1.5.95C23 4.05 23 6 23 6s1-1.12 1-3.13C24-.02 21 0 21 0h-2v6.35A5.85 5.85 0 0 0 17 6c-2.2 0-4 1.12-4 2.5s1.8 2.5 4 2.5m-6.7 9.48L8.82 18.9a47.54 47.54 0 0 1-1.44 1.13c-.3-.3-.99-1.02-2.04-2.19.9-.83 1.47-1.46 1.72-1.89s.38-.87.38-1.33c0-.6-.27-1.18-.82-1.76-.54-.58-1.33-.87-2.35-.87-1 0-1.79.29-2.34.87-.56.6-.83 1.18-.83 1.79 0 .81.42 1.75 1.25 2.8a6.57 6.57 0 0 0-1.8 1.79 3.46 3.46 0 0 0-.51 1.83c0 .86.3 1.56.92 2.1a3.5 3.5 0 0 0 2.42.83c1.17 0 2.44-.38 3.81-1.14L8.23 24h2.82l-2.09-2.38 1.34-1.14zM3.56 14.1a1.02 1.02 0 0 1 .73-.28c.31 0 .56.08.75.25a.85.85 0 0 1 .28.66c0 .52-.42 1.11-1.26 1.78-.53-.65-.8-1.23-.8-1.74a.9.9 0 0 1 .3-.67m.18 7.9c-.43 0-.78-.12-1.06-.35-.28-.23-.41-.49-.41-.76 0-.6.5-1.3 1.52-2.09a31.23 31.23 0 0 0 2.25 2.44c-.92.5-1.69.76-2.3.76"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M0 0l6 24h2L2 0zm21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.6 3h7.8l2 8H8.6l-2-8zm8.8 10l-2.9 1.9-.4-1.9h3.3zm3.6 0l-1.5-6h2l2 8H16l3-2z"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
</div>

Load cell array from text file to Octave

I have a text file containing output of Octave cell array:
confusionMatrix5 =
{
[1,1] =
228 0 0 0 0 0 0 0
0 113 0 0 0 0 0 1
10 0 97 0 0 0 7 0
1 0 2 225 0 0 0 0
0 0 0 0 227 0 0 1
0 2 0 0 0 112 0 0
1 0 3 0 0 0 110 0
0 1 0 0 0 0 0 227
[2,1] =
228 0 0 0 0 0 0 0
0 113 0 0 0 0 0 1
8 0 99 0 0 0 7 0
2 0 1 225 0 0 0 0
0 0 0 0 227 0 0 1
0 1 0 0 0 113 0 0
0 0 4 0 0 0 110 0
0 1 0 0 0 0 0 227
...
}
I tried to simply copy the content of the file above and paste it but it throws bunch of errors, i.e.:
octave:105> [3,3] =
parse error:
invalid constant left hand side of assignment
Is there any way to easily load the cell array of such format back to the Octave cli?
Edit: I managed to handle the situation with few regexes and text replacing this time but remember to save your workspaces, folks!

keep svg centered when scaling up the background circle

I want to use this sample svg icon with a circle background. I took some HTML code on how to do it from the DOM from this link
So currently I have this result and as you can see the icon is as big as the background circle.
<link href="https://unpkg.com/tailwindcss#1.1.4/dist/tailwind.min.css" rel="stylesheet" />
<svg class="h-6 w-6 flex-shrink-0" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12" class="text-green-200 fill-current"></circle>
<path class="text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>
I would like to have some inner circle margin / spacing. I could either scale down the icon a little bit or scale up the circle. I increased the viewbox size and circle values
<link href="https://unpkg.com/tailwindcss#1.1.4/dist/tailwind.min.css" rel="stylesheet" />
<svg class="h-6 w-6 flex-shrink-0" viewBox="0 0 28 28">
<circle cx="14" cy="14" r="14" class="text-green-200 fill-current"></circle>
<path class="text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>
But how can I keep the icon centered? Do I have to use a flexbox and center it by myself? The checkmarks on the Tailwind website (link posted above) don't need a flexbox so maybe someone knows how to setup a little margin for the icon and still having it in the center?
A workaround for this would be
<link href="https://unpkg.com/tailwindcss#1.1.4/dist/tailwind.min.css" rel="stylesheet" />
<div class="h-6 w-6 p-1 rounded-full bg-green-200">
<svg class="text-green-600 fill-current" viewBox="0 0 24 24">
<path d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>
</div>
but I would really like to keep the circle and don't use a div because I think using the circle is a "cleaner" solution?

Just change the viewBox. Something like this perhaps. If you want a larger border make the viewBox bigger still but don't forget to adjust its origin too.
You can make the circle larger, but if you do leave the cx and cy of the circle alone.
<link href="https://unpkg.com/tailwindcss#1.1.4/dist/tailwind.min.css" rel="stylesheet" />
<svg class="h-6 w-6 flex-shrink-0" viewBox="-2 -2 28 28">
<circle cx="12" cy="12" r="12" class="text-green-200 fill-current"></circle>
<path class="text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>

Html path location strange format

So I've been having a gander at some snazzy websites seeing how they do things and how it's laid out for learning purposes and I encountered some code for the pathing that looks like the below example.
<path d="M5.47 7.2l-.55.33a5.14 5.14 0 0 1-3.2-1.28C1.48 6 1.2 5.88.94 5.7A2.39 2.39 0 0 1 0 4.4a7.29 7.29 0 0 1 1.61-1.21c.56-.4 1.13-.78 1.73-1.19l.54.18c.29-.74.29-.75 1-1.1A9.45 9.45 0 0 1 6.23.52 17.77 17.77 0 0 1 8 .14c.09 0 .19.06.29.08s.24.07.28 0A.78.78 0 0 1 9.24 0a5.47 5.47 0 0 1 1.66.09c.38.11.75.26 1.13.37s.35.29.44.56a.7.7 0 0 1 .8 0A8.54 8.54 0 0 1 16 3.54 14.5 14.5 0 0 0 17.11 5a2.55 2.55 0 0 1-1 .92c-.72.39-1.45.77-2.18 1.14s-.65.32-1.09-.24c-.45.09-.41.58-.72.85A13.77 13.77 0 0 1 6.7 8a1.15 1.15 0 0 1-1-.57c-.01-.1-.1-.14-.23-.23zm5.15-3.67c-.16-.35-.26-.62-.41-.87a1.12 1.12 0 0 0-1-.62 4.75 4.75 0 0 0-1.48.26 1.22 1.22 0 0 0-.73.59 9 9 0 0 0-.49 1 .64.64 0 0 0 0 .46c.22.45.47.89.73 1.32a.43.43 0 0 0 .25.19 3.82 3.82 0 0 0 2 0 .76.76 0 0 0 .31-.24 6.42 6.42 0 0 0 .42-.62c.17-.26.33-.54.51-.84l1.27.1c0 .62-.59.85-.7 1.33.18.26.36.43.68.35L15.64 5v-.21a22.24 22.24 0 0 0-3.1-2.73 2.62 2.62 0 0 0-.73-.3 1 1 0 0 0-.75 0c.24.17.46.31.67.48.53.42.57.64.29 1.43zM6.09 6.2c-.3-.4-.53-.68-.74-1a1.1 1.1 0 0 1-.2-.51 3.43 3.43 0 0 1 .36-2.08.9.9 0 0 0 .24-.61 11.53 11.53 0 0 0-1.84 1.2A10.47 10.47 0 0 0 2 4.43l.88.5a5.13 5.13 0 0 1 .76.43 4.57 4.57 0 0 0 2.45.84z"></path>
I was wondering why is it laid out like this? For security reasons? And how does something with such a strange path string actually locate the relevant path.
Any information regarding this would be much appreciated.
Kind regards,
Sam

That's an SVG path element.
It describes the path a line takes (not a file path!) using coordinates, lengths, and so on.
It has nothing to do with security.
<svg>
<path d="M5.47 7.2l-.55.33a5.14 5.14 0 0 1-3.2-1.28C1.48 6 1.2 5.88.94 5.7A2.39 2.39 0 0 1 0 4.4a7.29 7.29 0 0 1 1.61-1.21c.56-.4 1.13-.78 1.73-1.19l.54.18c.29-.74.29-.75 1-1.1A9.45 9.45 0 0 1 6.23.52 17.77 17.77 0 0 1 8 .14c.09 0 .19.06.29.08s.24.07.28 0A.78.78 0 0 1 9.24 0a5.47 5.47 0 0 1 1.66.09c.38.11.75.26 1.13.37s.35.29.44.56a.7.7 0 0 1 .8 0A8.54 8.54 0 0 1 16 3.54 14.5 14.5 0 0 0 17.11 5a2.55 2.55 0 0 1-1 .92c-.72.39-1.45.77-2.18 1.14s-.65.32-1.09-.24c-.45.09-.41.58-.72.85A13.77 13.77 0 0 1 6.7 8a1.15 1.15 0 0 1-1-.57c-.01-.1-.1-.14-.23-.23zm5.15-3.67c-.16-.35-.26-.62-.41-.87a1.12 1.12 0 0 0-1-.62 4.75 4.75 0 0 0-1.48.26 1.22 1.22 0 0 0-.73.59 9 9 0 0 0-.49 1 .64.64 0 0 0 0 .46c.22.45.47.89.73 1.32a.43.43 0 0 0 .25.19 3.82 3.82 0 0 0 2 0 .76.76 0 0 0 .31-.24 6.42 6.42 0 0 0 .42-.62c.17-.26.33-.54.51-.84l1.27.1c0 .62-.59.85-.7 1.33.18.26.36.43.68.35L15.64 5v-.21a22.24 22.24 0 0 0-3.1-2.73 2.62 2.62 0 0 0-.73-.3 1 1 0 0 0-.75 0c.24.17.46.31.67.48.53.42.57.64.29 1.43zM6.09 6.2c-.3-.4-.53-.68-.74-1a1.1 1.1 0 0 1-.2-.51 3.43 3.43 0 0 1 .36-2.08.9.9 0 0 0 .24-.61 11.53 11.53 0 0 0-1.84 1.2A10.47 10.47 0 0 0 2 4.43l.88.5a5.13 5.13 0 0 1 .76.43 4.57 4.57 0 0 0 2.45.84z"></path>
</svg>