Published
Edited
Aug 8, 2019
1 fork
Importers
firstName = "jygpq"
lastName = "Last"
handle = "handle"
isTextLight = true
function badgeCode(g, context, frameNumber) {
context.fillRect(0, 0, width, height);
}
preview = html`<div style="
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 6px;
">${frames.map((f, i) => {
const context = DOM.context2d(f.width, f.height, 1);
context.drawImage(f, 0, 0, f.width, f.height);
context.canvas.style = "width: 100%;";
return context.canvas;
})}`
// Code reference: https://observablehq.com/@mbostock/animation-loops
animation = {
while (true) {
for (let i = 0; i < numOfFrames; ++i) {
yield frames[i];
await Promises.tick(50);
}
for (let i = numOfFrames - 2; i > 0; --i) {
yield frames[i];
await Promises.tick(50);
}
}
}
download = DOM.download(async () => {
const blobs = await Promise.all(frames.map(f => new Promise(resolve => f.toBlob(resolve))));
const zip = new jszip();
blobs.forEach((b, i) => zip.file(`${lastName}-${firstName}-frame${i + 1}.png`, b, {type: "blob"}));
return zip.generateAsync({type: "blob"})
}, `${lastName}-${firstName}.zip`, "Download as ZIP")
function overlayCode(layer) {
const sponsorRectHeight = 220
const padding = 40
const sidePadding = 110
const textColor = isTextLight ? "#fff" : "#2c3e50"
layer
.attr("fill", "#fff")
.attr("font-family", "Helvetica")
// .attr("transform", "translate(0,100)")
layer.append("path")
.attr("d", [
"M 0 0",
`L ${width} 0`,
`L ${width} 370`,
`L 0 480`,
"Z",
].join(" "))
.attr("fill", "#2c3e50")
layer.append("text")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", height * 0.15)
.attr("font-size", 122)
.attr("font-weight", "800")
.text(firstName)
layer.append("text")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", height * 0.19)
.attr("font-size", 32)
.attr("letter-spacing", "0.23em")
.text(lastName.toUpperCase())
const handleWrapper = layer.append("g")
.style("transform", `translate(${width / 2 - handle.length * 11.4 - 21}px, ${height * 0.235}px)`)
handleWrapper.append("path")
.attr("d", "M18.1016 0C6.60427 0 0.0133689 7.09586 0 17.7995C0.0133689 28.6763 6.55079 35 17.9278 35C21.7379 35 25.4679 34.108 27.139 33.1628L25.8155 29.302C24.385 29.8878 21.3101 30.6599 18.2353 30.6599C9.5187 30.6599 4.78609 26.0536 4.75935 17.6398C4.78609 10.0247 9.14437 4.2868 18.0347 4.2868C24.4652 4.2868 30.4411 7.3488 30.4278 15.7094C30.4411 20.9148 29.4786 23.2845 27.6336 23.2845C26.7112 23.2845 26.1497 22.5922 26.1363 21.3541V8.36059H21.9518V9.85165H21.7647C21.3101 8.68011 18.4759 7.57512 15.4679 8.02777C11.8984 8.54698 8.04812 11.4625 8.02138 17.6398C8.04812 23.9102 11.631 27.1187 15.8556 27.345C18.8903 27.5181 21.6176 26.2533 22.246 24.6424H22.4064C22.7005 26.4796 23.9304 27.7311 27.032 27.5048C32.8074 27.1852 35.0133 22.5523 34.9999 16.0156C35.0133 6.55002 28.7299 0 18.1016 0ZM17.2861 12.461C20.6684 12.461 21.6845 14.245 21.6978 17.4401C21.7379 21.0612 20.5882 22.965 17.3128 22.965C13.8235 22.965 12.647 20.3024 12.6337 17.48C12.647 14.4447 14.3182 12.461 17.2861 12.461Z")
.attr("transform", "translate(0, -27)")
handleWrapper.append("text")
// .attr("text-anchor", "middle")
.attr("x", 42)
// .attr("y", height * 0.17)
.attr("font-size", 42)
.attr("font-family", "Consolas, monospace")
.text(handle)
// layer.append("rect")
// .attr("width",`${width - sidePadding * 2}`)
// .attr("height",sponsorRectHeight)
// .attr("y",`${height - sponsorRectHeight - padding}`)
// .attr("x",`${sidePadding}`)
// .attr("fill",textColor)
// .attr("rx",20)
layer.append("text")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", height * 0.901)
.attr("font-size", 84)
.attr("font-weight", "bold")
.attr("fill", textColor)
.attr("font-family", "Helvetica")
.text(`visfest 2019`)
const logoLayer = layer.append("g")
.attr("transform", `translate(${width / 2 - 350 / 2}, ${height - sponsorRectHeight - 25 - height*0.04}) scale(2) translate(0, 0)`)
logoLayer.append("path")
.attr("d", `M19.5 28.6667C18.3458 28.6667 17.3458 28.4153 16.5 27.9127C15.6572 27.412 14.9834 26.7027 14.5552 25.8654C14.1 24.9942 13.7667 24.0729 13.5635 23.1239C13.348 22.0947 13.2429 21.0483 13.25 20C13.25 19.1699 13.3042 18.3764 13.4135 17.6176C13.5219 16.8598 13.7229 16.0894 14.0156 15.3075C14.3083 14.5256 14.6854 13.8476 15.1448 13.2727C15.623 12.6838 16.2414 12.2044 16.9521 11.8716C17.6979 11.5124 18.5458 11.3333 19.5 11.3333C20.6542 11.3333 21.6542 11.5847 22.5 12.0873C23.3428 12.588 24.0166 13.2973 24.4448 14.1346C24.8969 14.9964 25.2271 15.9103 25.4365 16.8761C25.6448 17.841 25.75 18.883 25.75 20C25.75 20.8301 25.6958 21.6236 25.5865 22.3824C25.4699 23.1702 25.2639 23.9445 24.9719 24.6925C24.6698 25.4744 24.2948 26.1524 23.8427 26.7273C23.3906 27.3021 22.7927 27.7692 22.0479 28.1284C21.3031 28.4876 20.4542 28.6667 19.5 28.6667ZM21.7063 22.2945C22.304 21.6944 22.6365 20.864 22.625 20C22.625 19.1073 22.326 18.3425 21.7292 17.7055C21.1313 17.0685 20.3885 16.75 19.5 16.75C18.6115 16.75 17.8688 17.0685 17.2708 17.7055C16.6853 18.3123 16.362 19.1405 16.375 20C16.375 20.8927 16.674 21.6575 17.2708 22.2945C17.8688 22.9315 18.6115 23.25 19.5 23.25C20.3885 23.25 21.124 22.9315 21.7063 22.2945ZM19.5 33C26.4031 33 32 27.1792 32 20C32 12.8208 26.4031 7 19.5 7C12.5969 7 7 12.8208 7 20C7 27.1792 12.5969 33 19.5 33Z`)
.attr("fill", textColor)
const wordmarkLayer = logoLayer.append("g")
.attr("transform", `translate(40, 8)`)
wordmarkLayer.append("path")
.attr("d", `m16.208 11.89c0-5.6618-3.5155-8.8899-8.1041-8.8899-4.614 0-8.104 3.2281-8.104 8.8899 0 5.6365 3.4901 8.89 8.104 8.89 4.5886 0 8.1041-3.2281 8.1041-8.89zm-3.7098 0c0 3.6675-1.7408 5.6534-4.3943 5.6534-2.6619 0-4.3943-1.9859-4.3943-5.6534 0-3.6675 1.7324-5.6534 4.3943-5.6534 2.6535 0 4.3943 1.9859 4.3943 5.6534z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m18.851 20.543h3.5493v-2.0788h0.1605c0.4986 1.0817 1.5887 2.2901 3.6844 2.2901 2.9577 0 5.2647-2.3408 5.2647-6.6843 0-4.4619-2.4084-6.6759-5.2562-6.6759-2.1718 0-3.2112 1.2929-3.6929 2.3492h-0.1098v-6.5069h-3.6v17.307zm3.5239-6.4899c0-2.3155 0.9803-3.7943 2.7295-3.7943 1.7831 0 2.7295 1.5464 2.7295 3.7943 0 2.2647-0.9633 3.8365-2.7295 3.8365-1.7323 0-2.7295-1.5211-2.7295-3.8365z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m44.71 11.265c-0.3211-2.3915-2.2479-3.8703-5.5267-3.8703-3.321 0-5.5097 1.538-5.5012 4.0393-0.0085 1.9436 1.2168 3.2027 3.752 3.7098l2.2478 0.4478c1.1324 0.2282 1.6479 0.6423 1.6648 1.293-0.0169 0.769-0.8535 1.3183-2.1126 1.3183-1.2845 0-2.138-0.5493-2.3577-1.6056l-3.5408 0.1859c0.338 2.4844 2.4506 4.014 5.89 4.014 3.3633 0 5.7717-1.7155 5.7801-4.276-0.0084-1.876-1.2337-2.9999-3.752-3.5154l-2.3492-0.4732c-1.2084-0.262-1.6563-0.6761-1.6479-1.3014-0.0084-0.7775 0.8704-1.2845 1.9859-1.2845 1.2507 0 1.9943 0.68449 2.1718 1.5211l3.2957-0.2028z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m53.221 20.797c3.2197 0 5.3746-1.5634 5.8816-3.9718l-3.3211-0.2197c-0.3633 0.9887-1.3013 1.5042-2.4929 1.5042-1.7999 0-2.9407-1.1915-2.9407-3.1267v-0.0084h8.8392v-0.9887c0-4.4112-2.6704-6.5914-6.1013-6.5914-3.8196 0-6.2956 2.7126-6.2956 6.7181 0 4.1154 2.4422 6.6844 6.4308 6.6844zm-2.8731-8.0534c0.0676-1.4788 1.1999-2.6619 2.7971-2.6619 1.5549 0 2.6365 1.1155 2.6534 2.6619h-5.4505z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m61.587 20.543h3.5999v-7.3434c0.0085-1.5887 1.1578-2.6789 2.6113-2.6789 0.4901 0 0.8873 0.1353 1.2253 0.3043l1.0816-2.9746c-0.4732-0.28732-1.0816-0.47323-1.7746-0.47323-1.4619 0-2.645 0.84505-3.1182 2.4506h-0.1352v-2.2647h-3.4901v12.98z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m83.89 7.5633h-3.8112l-2.6872 9.2871h-0.1352l-2.6957-9.2871h-3.8028l4.538 12.98h4.0562l4.5379-12.98z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m89.225 20.788c1.9183 0 3.1605-0.8366 3.7943-2.045h0.1014v1.7999h3.414v-8.7547c0-3.0929-2.645-4.3942-5.4506-4.3942-3.1943 0-5.214 1.4873-5.7125 3.8534l3.3295 0.2704c0.245-0.8619 1.014-1.4957 2.3069-1.4957 1.2423 0 1.9183 0.6084 1.9268 1.6985 0.0084 0.8535-0.8873 0.9803-3.1436 1.2-2.569 0.2366-4.876 1.0986-4.876 3.9971 0 2.5689 1.8338 3.8703 4.3098 3.8703zm1.031-2.4844c-1.1071 0-1.9014-0.5155-1.9014-1.5042 0-1.0141 0.8366-1.5127 2.1042-1.6901 0.7859-0.1099 2.0703-0.2958 2.5013-0.5831v1.3774c0 1.3605-1.1239 2.4-2.7041 2.4z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m99.327 20.543h3.5488v-2.0788h0.161c0.499 1.0817 1.589 2.2901 3.684 2.2901 2.958 0 5.265-2.3408 5.265-6.6843 0-4.4619-2.408-6.6759-5.256-6.6759-2.172 0-3.211 1.2929-3.693 2.3492h-0.11v-6.5069h-3.5998v17.307zm3.5238-6.4899c0-2.3155 0.98-3.7943 2.73-3.7943 1.783 0 2.729 1.5464 2.729 3.7943 0 2.2647-0.963 3.8365-2.729 3.8365-1.733 0-2.73-1.5211-2.73-3.8365z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m117.99 3.2366h-3.6v17.307h3.6v-17.307z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m126.82 20.797c3.219 0 5.374-1.5634 5.881-3.9718l-3.321-0.2197c-0.363 0.9887-1.301 1.5042-2.493 1.5042-1.8 0-2.94-1.1915-2.94-3.1267v-0.0084h8.839v-0.9887c0-4.4112-2.671-6.5914-6.101-6.5914-3.82 0-6.296 2.7126-6.296 6.7181 0 4.1154 2.442 6.6844 6.431 6.6844zm-2.873-8.0534c0.067-1.4788 1.2-2.6619 2.797-2.6619 1.555 0 2.636 1.1155 2.653 2.6619h-5.45z`)
.attr("fill", textColor)
wordmarkLayer.append("path")
.attr("d", `m18.751 20.643v-17.507h3.8v6.396c0.5246-1.0436 1.5944-2.2384 3.7027-2.2384 1.4511 0 2.7935 0.56477 3.7718 1.6994 0.9774 1.1337 1.5844 2.828 1.5844 5.0765 0 2.1888-0.5814 3.8847-1.5466 5.0352-0.9664 1.1519-2.3111 1.7491-3.8181 1.7491-2.1028 0-3.221-1.1932-3.7449-2.2839v2.0726h-3.7493zm3.8098-2.1788c0.4986 1.0817 1.5887 2.2901 3.6844 2.2901 2.9577 0 5.2647-2.3408 5.2647-6.6843 0-4.4619-2.4084-6.6759-5.2562-6.6759-2.1718 0-3.2112 1.2929-3.6929 2.3492h-0.1098v-6.5069h-3.6v17.307h3.5493v-2.0788h0.1605zm22.262-7.1066l-3.489 0.2147-0.0179-0.0843c-0.1665-0.785-0.8647-1.4419-2.074-1.4419-0.5441 0-1.023 0.1239-1.3614 0.3355-0.3368 0.2106-0.5282 0.5028-0.5245 0.8479l1e-4 0.0024c-0.0039 0.2834 0.0934 0.5138 0.3309 0.7083 0.2435 0.1993 0.6389 0.3641 1.2373 0.4939l2.3486 0.4731c1.2681 0.2595 2.2245 0.6748 2.8656 1.2723 0.6446 0.6009 0.9623 1.3783 0.9666 2.3407-0.0043 1.3151-0.6263 2.4135-1.6729 3.1793-1.0446 0.7643-2.5096 1.1971-4.2072 1.1971-1.7335 0-3.1432-0.3854-4.1649-1.0932-1.0239-0.7092-1.6515-1.7379-1.8242-3.0074l-0.0146-0.1076 3.7349-0.1961 0.0175 0.084c0.1049 0.5044 0.3592 0.8824 0.7373 1.1362 0.3803 0.2552 0.8936 0.3898 1.5225 0.3898 0.6163 0 1.1202-0.1347 1.4686-0.3553 0.3459-0.219 0.5355-0.5197 0.5439-0.8628-0.0082-0.2935-0.1266-0.5314-0.3756-0.7264-0.2547-0.1994-0.6489-0.3559-1.2088-0.4687l-2.2476-0.4479c-1.2788-0.2557-2.24-0.7035-2.881-1.3434-0.6434-0.6423-0.9558-1.4698-0.9515-2.4645-0.0042-1.2836 0.5569-2.3231 1.5433-3.0385 0.9833-0.71318 2.3835-1.1007 4.0579-1.1007 1.6535 0 2.9773 0.37282 3.9308 1.0571 0.9555 0.68578 1.531 1.6787 1.695 2.8999l0.0143 0.1065zm-0.1278-0.1925c-0.3606-2.3331-2.2791-3.771-5.5123-3.771-3.321 0-5.5097 1.538-5.5012 4.0393-0.0085 1.9436 1.2168 3.2027 3.752 3.7098l2.2478 0.4478c1.1324 0.2282 1.6479 0.6423 1.6648 1.293-0.0169 0.769-0.8535 1.3183-2.1126 1.3183-1.2845 0-2.138-0.5493-2.3577-1.6056l-3.5408 0.1859c0.0045 0.0333 0.0094 0.0664 0.0145 0.0993 0.3804 2.4258 2.4822 3.9147 5.8755 3.9147 3.3633 0 5.7717-1.7155 5.7801-4.276-0.0084-1.876-1.2337-2.9999-3.752-3.5154l-2.3492-0.4732c-1.2084-0.262-1.6563-0.6761-1.6479-1.3014-0.0084-0.7775 0.8704-1.2845 1.9859-1.2845 1.2507 0 1.9943 0.68449 2.1718 1.5211l3.2957-0.2028c-0.0045-0.0333-0.0093-0.0664-0.0144-0.0993zm14.529 5.5675l-0.0238 0.1128c-0.5194 2.4672-2.7265 4.0512-5.9794 4.0512-2.0163 0-3.652-0.6499-4.7833-1.8297-1.1308-1.1793-1.7475-2.8773-1.7475-4.9547 0-2.0233 0.6256-3.7287 1.7422-4.9292 1.1174-1.2013 2.7188-1.8889 4.6534-1.8889 1.7366 0 3.2893 0.55211 4.408 1.6708 1.119 1.119 1.7933 2.7944 1.7933 5.0206v1.0887h-8.8384c0.0175 0.9052 0.2942 1.6283 0.7673 2.1287 0.4883 0.5167 1.1955 0.8064 2.0726 0.8064 1.1629 0 2.0543-0.5005 2.3991-1.4387l0.0258-0.0702 3.5107 0.2322zm-8.8755-1.6584c0.0355 1.8811 1.1686 3.0351 2.9399 3.0351 1.1916 0 2.1296-0.5155 2.4929-1.5042l3.3211 0.2197c-7e-3 0.0331-0.0142 0.066-0.0218 0.0988-0.5446 2.3523-2.6843 3.873-5.8598 3.873-3.9886 0-6.4308-2.569-6.4308-6.6844 0-4.0055 2.476-6.7181 6.2956-6.7181 3.4309 0 6.1013 2.1802 6.1013 6.5914v0.9887h-8.8392v0.0084c0 0.0307 3e-4 0.0612 8e-4 0.0916zm11.138 5.5688v-13.18h3.6901v2.1456c0.5211-1.523 1.7046-2.3315 3.1534-2.3315 0.7109 0 1.3373 0.19072 1.8265 0.48775l0.0701 0.04257-1.148 3.1571-0.1003-0.0502c-0.3285-0.1642-0.7102-0.2937-1.1806-0.2937-1.3978 0-2.5031 1.045-2.5113 2.5794v7.4429h-3.7999zm3.6999-7.4434c0.0085-1.5887 1.1578-2.6789 2.6113-2.6789 0.447 0 0.8167 0.1125 1.1348 0.2606 0.0306 0.0142 0.0608 0.0288 0.0905 0.0437l1.0816-2.9746c-0.4732-0.28732-1.0816-0.47323-1.7746-0.47323-1.4619 0-2.645 0.84505-3.1182 2.4506h-0.1352v-2.2647h-3.4901v12.98h3.5999v-7.3434zm18.844-5.7365l-4.6078 13.18h-4.1982l-4.6079-13.18h4.0188l2.6881 9.2611 2.6798-9.2611h4.0272zm-6.7745 9.3871l-2.6957-9.2871h-3.8028l4.538 12.98h4.0562l4.5379-12.98h-3.8112l-2.6872 9.2871h-0.1352zm8.1363-5.7013c0.5335-2.3088 2.5411-3.7548 5.6908-3.7548 2.8056 0 5.4506 1.3014 5.4506 4.3942v8.7547h-3.414v-1.7999h-0.1014c-0.6338 1.2084-1.876 2.045-3.7943 2.045-2.476 0-4.3098-1.3014-4.3098-3.8703 0-2.8985 2.307-3.7605 4.876-3.9971 2.2563-0.2197 3.152-0.3465 3.1436-1.2-0.0085-1.0901-0.6845-1.6985-1.9268-1.6985-1.2929 0-2.0619 0.6338-2.3069 1.4957l-3.3295-0.2704c0.0069-0.033 0.0142-0.0659 0.0217-0.0986zm4.3885 1.6722c1.1326-0.1103 1.9074-0.1962 2.3992-0.3577 0.2444-0.0803 0.4068-0.1757 0.5081-0.2917 0.0986-0.1132 0.1476-0.2557 0.1457-0.45-0.0041-0.5239-0.1678-0.9189-0.4671-1.1842-0.301-0.2669-0.7536-0.4153-1.3597-0.4153-1.2553 0-1.9797 0.6106-2.2107 1.4231l-0.0225 0.0789-3.5245-0.2862 0.0234-0.1111c0.2544-1.2072 0.898-2.193 1.8864-2.8757 0.9871-0.6818 2.3118-1.0571 3.924-1.0571 1.4163 0 2.8011 0.32818 3.8349 1.0555 1.0381 0.73036 1.7157 1.8592 1.7157 3.4387v8.8547h-3.614v-1.696c-0.6762 1.1586-1.9275 1.9411-3.7957 1.9411-1.2544 0-2.357-0.3296-3.1478-0.9953-0.7932-0.6677-1.262-1.6648-1.262-2.975 0-1.4813 0.5923-2.453 1.5186-3.0796 0.919-0.6217 2.1584-0.8983 3.448-1.0171zm9.4458 7.8219v-17.507h3.7998v6.396c0.525-1.0436 1.594-2.2384 3.703-2.2384 1.451 0 2.793 0.56477 3.772 1.6994 0.977 1.1337 1.584 2.828 1.584 5.0765 0 2.1888-0.581 3.8847-1.547 5.0352-0.966 1.1519-2.311 1.7491-3.818 1.7491-2.102 0-3.221-1.1932-3.745-2.2839v2.0726h-3.7488zm3.8098-2.1788c0.499 1.0817 1.589 2.2901 3.684 2.2901 2.958 0 5.265-2.3408 5.265-6.6843 0-4.4619-2.408-6.6759-5.256-6.6759-2.172 0-3.211 1.2929-3.693 2.3492h-0.11v-6.5069h-3.5998v17.307h3.5488v-2.0788h0.161zm15.049-15.328v17.507h-3.8v-17.507h3.8zm14.736 13.596l-0.024 0.1128c-0.519 2.4672-2.726 4.0512-5.979 4.0512-2.017 0-3.652-0.6499-4.784-1.8297-1.13-1.1793-1.747-2.8773-1.747-4.9547 0-2.0233 0.626-3.7287 1.742-4.9292 1.117-1.2013 2.719-1.8889 4.654-1.8889 1.736 0 3.289 0.55211 4.407 1.6708 1.12 1.119 1.794 2.7944 1.794 5.0206v1.0887h-8.839c0.018 0.9052 0.295 1.6283 0.768 2.1287 0.488 0.5167 1.195 0.8064 2.072 0.8064 1.163 0 2.055-0.5005 2.399-1.4387l0.026-0.0702 3.511 0.2322zm-8.876-1.6584c0.036 1.8811 1.169 3.0351 2.94 3.0351 1.192 0 2.13-0.5155 2.493-1.5042l3.321 0.2197c-7e-3 0.0331-0.014 0.066-0.022 0.0988-0.544 2.3523-2.684 3.873-5.859 3.873-3.989 0-6.431-2.569-6.431-6.6844 0-4.0055 2.476-6.7181 6.296-6.7181 3.43 0 6.101 2.1802 6.101 6.5914v0.9887h-8.839v0.0084 0.0916zm-110-9.8218c1.4733 1.5366 2.3591 3.7854 2.3591 6.6373 0 2.8519-0.8858 5.1008-2.3591 6.6374-1.4735 1.5366-3.5266 2.3526-5.845 2.3526-2.3311 0-4.3844-0.8224-5.8546-2.3623-1.4701-1.5397-2.3494-3.7885-2.3494-6.6277 0-2.8517 0.8793-5.1006 2.3495-6.6372 1.4703-1.5368 3.5236-2.3526 5.8545-2.3526 2.3184 0 4.3715 0.81594 5.845 2.3526zm-2.7308 10.777c0.7482-0.9316 1.1801-2.3201 1.1801-4.1394s-0.4319-3.2078-1.1801-4.1394c-0.746-0.92891-1.8146-1.414-3.1142-1.414-1.3039 0-2.3724 0.48513-3.1173 1.4139-0.7471 0.93156-1.1769 2.32-1.1769 4.1394s0.42983 3.2079 1.1769 4.1395c0.7449 0.9288 1.8135 1.4139 3.1173 1.4139 1.2996 0 2.3682-0.4851 3.1142-1.414zm11.947-4.6839c-0.4478 0.6365-0.6906 1.5624-0.6906 2.7079 0 1.1451 0.2468 2.0819 0.6972 2.7294 0.4477 0.6436 1.0998 1.0071 1.9323 1.0071 0.8487 0 1.5008-0.3755 1.9445-1.0254 0.4465-0.654 0.685-1.5911 0.685-2.7111 0-1.1119-0.2343-2.0382-0.6785-2.6834-0.4411-0.641-1.0929-1.0109-1.951-1.0109-0.8423 0-1.494 0.354-1.9389 0.9864zm27.183 1.398h5.4505c-3e-4 -0.0335-0.0012-0.0668-0.0026-0.1-0.0614-1.4943-1.1296-2.5619-2.6508-2.5619-1.561 0-2.678 1.1301-2.7909 2.5619-0.0026 0.0332-0.0047 0.0665-0.0062 0.1zm0.1065-0.1h5.2414c-0.0611-1.4406-1.0868-2.4619-2.5508-2.4619-1.5037 0-2.5782 1.0836-2.6906 2.4619zm38.495 5.1991c0.3144 0.2355 0.7662 0.3614 1.3059 0.3614 1.5353 0 2.6041-1.0045 2.6041-2.3v-1.2088c-0.097 0.045-0.2102 0.0861-0.3327 0.1238-0.1976 0.0609-0.4266 0.1153-0.665 0.1637-0.4766 0.0968-0.997 0.1711-1.3898 0.226-0.6264 0.0877-1.1333 0.2533-1.4816 0.5125-0.3431 0.2554-0.5364 0.6042-0.5364 1.0786 0 0.4641 0.1847 0.81 0.4955 1.0428zm3.91-3.2585c0.0371-0.0187 0.0705-0.0379 0.1-0.0575v1.3774c0 1.3605-1.1239 2.4-2.7041 2.4-1.1071 0-1.9014-0.5155-1.9014-1.5042 0-1.0141 0.8366-1.5127 2.1042-1.6901 0.7321-0.1024 1.8969-0.2707 2.4013-0.5256zm10.782-3.2386c-0.448 0.6365-0.691 1.5624-0.691 2.7079 0 1.1451 0.247 2.0819 0.697 2.7294 0.448 0.6436 1.1 1.0071 1.933 1.0071 0.848 0 1.5-0.3755 1.944-1.0254 0.447-0.654 0.685-1.5911 0.685-2.7111 0-1.1119-0.234-2.0382-0.678-2.6834-0.442-0.641-1.093-1.0109-1.951-1.0109-0.843 0-1.495 0.354-1.939 0.9864zm10.744-8.1088h3.6v17.307h-3.6v-17.307zm9.56 9.5068h5.45c0-0.0335-1e-3 -0.0668-2e-3 -0.1-0.062-1.4943-1.13-2.5619-2.651-2.5619-1.561 0-2.678 1.1301-2.791 2.5619-3e-3 0.0332-5e-3 0.0665-6e-3 0.1zm0.106-0.1h5.242c-0.062-1.4406-1.087-2.4619-2.551-2.4619-1.504 0-2.578 1.0836-2.691 2.4619zm-115.95-9.6434c4.5886 0 8.1041 3.2281 8.1041 8.8899 0 5.6619-3.5155 8.89-8.1041 8.89-4.614 0-8.104-3.2535-8.104-8.89 0-5.6618 3.4901-8.8899 8.104-8.8899zm0 14.543c2.6535 0 4.3943-1.9859 4.3943-5.6534 0-3.6675-1.7408-5.6534-4.3943-5.6534-2.6619 0-4.3943 1.9859-4.3943 5.6534 0 3.6675 1.7324 5.6534 4.3943 5.6534zm17-7.2843c-1.7492 0-2.7295 1.4788-2.7295 3.7943 0 2.3154 0.9972 3.8365 2.7295 3.8365 1.7662 0 2.7295-1.5718 2.7295-3.8365 0-2.2479-0.9464-3.7943-2.7295-3.7943zm80.477 0c-1.75 0-2.73 1.4788-2.73 3.7943 0 2.3154 0.997 3.8365 2.73 3.8365 1.766 0 2.729-1.5718 2.729-3.8365 0-2.2479-0.946-3.7943-2.729-3.7943z`)
.attr("clip-rule", "evenodd")
.attr("fill-rule", "evenodd")
.attr("fill", textColor)
}
frames = {
const frames = Array.from({length: numOfFrames}, () => DOM.canvas(width, height));
for (let i = 0; i < numOfFrames; ++i) {
const canvas = frames[i];
const context = canvas.getContext("2d");
const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`);
await badgeCode(svg.append("g"), context, i + 1);
await overlayCode(svg.append("g"));
const image = await rasterize(svg.node());
context.drawImage(image, 0, 0, width, height);
context.canvas.style = "max-width: 100%;";
URL.revokeObjectURL(image.src);
yield frames;
}
}
serialize = {
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
return function serialize(svg) {
svg = svg.cloneNode(true);
const fragment = location.href + "#";
const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);
while (walker.nextNode()) {
for (const attr of walker.currentNode.attributes) {
if (attr.value.includes(fragment)) {
attr.value = attr.value.replace(fragment, "#");
}
}
}
svg.setAttributeNS(xmlns, "xmlns", svgns);
svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
const serializer = new XMLSerializer;
const string = serializer.serializeToString(svg);
return new Blob([string], {type: "image/svg+xml"});
};
}
function rasterize(svg) {
let resolve, reject;
const promise = new Promise((y, n) => (resolve = y, reject = n));
const image = new Image;
image.onerror = reject;
image.onload = () => resolve(image);
image.src = URL.createObjectURL(serialize(svg));
return promise;
}
numOfFrames = 10
width = 1050
height = 1500
jszip = require("jszip@3/dist/jszip.js")
d3 = require("d3@5")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.