You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.2 KiB
68 lines
2.2 KiB
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
#preview {
|
|
text-align: center;
|
|
padding: 15vh 0;
|
|
}
|
|
#preview svg {
|
|
transform: scale(2);
|
|
}
|
|
#markup {
|
|
border: none;
|
|
box-sizing: border-box;
|
|
background: #EEE;
|
|
padding: 1em 1.2em;
|
|
height: 30vh;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="preview"></div>
|
|
<textarea id="markup" placeholder="paste svg markup"></textarea>
|
|
<script>
|
|
const markup = document.querySelector('#markup')
|
|
const preview = document.querySelector('#preview')
|
|
|
|
function createBadge (svg) {
|
|
const base64 = svg
|
|
? `data:image/svg+xml;base64,${btoa(markup.value)}`
|
|
: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
|
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53.6" height="30" viewBox="0 0 536 200">
|
|
<linearGradient id="a" x2="0" y2="100%">
|
|
<stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
|
|
<stop offset="1" stop-opacity=".1"/>
|
|
</linearGradient>
|
|
<mask id="m"><rect width="536" height="200" rx="30" fill="#FFF"/></mask>
|
|
<g mask="url(#m)">
|
|
<rect width="212" height="200" fill="#555"/>
|
|
<rect width="324" height="200" fill="#08C" x="212"/>
|
|
<rect width="536" height="200" fill="url(#a)"/>
|
|
</g>
|
|
<g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
|
|
<text x="172" y="148" textLength="0" fill="#000" opacity="0.25"/>
|
|
<text x="162" y="138" textLength="0"/>
|
|
<text x="267" y="148" textLength="224" fill="#000" opacity="0.25">icon</text>
|
|
<text x="257" y="138" textLength="224">icon</text>
|
|
</g>
|
|
<image x="40" y="35" width="130" height="130" xlink:href="${base64}"/>
|
|
</svg>`
|
|
}
|
|
|
|
// init badge
|
|
preview.innerHTML = createBadge()
|
|
|
|
// update badge on input
|
|
markup.oninput = function () {
|
|
preview.innerHTML = createBadge(markup.value)
|
|
}
|
|
</script>
|
|
</body>
|
|
<body>
|
|
</html>
|
|
|