About This Quote Designer Tool Our quote designer tool makes it easy to create beautiful, layered text designs for cutting machines like Cricut or Silhouette. You can experiment with up to four lines of text, mix and match fonts (both script and standard), and fine-tune the size, bold, italic, and spacing of each line. The live preview lets you see every adjustment instantly before downloading your finished quote as an SVG file — ready for cutting, vinyl decals, wall art, or print projects. It’s fast, flexible, and beginner-friendly.
Below is an example of a quote made with the designer. This was done in 60 seconds showing how quick and easy the Quote Designer Tool is to use.
Quote Designer — Crafty Crafter Club Canvas size
Text lines
+ Add another line
⬇ Download SVG for Cricut Clear all
Cricut-ready: text is exported as outlined paths — no font issues in Design Space.
`; container.appendChild(card); }); attachCardListeners(); } function attachCardListeners() { // Text inputs container.querySelectorAll('input[data-field="text"]').forEach(el => { el.addEventListener('input', e => { const l = findLine(e.target.dataset.id); if(l) { l.text = e.target.value; updatePreviewText(l); renderSVG(); } }); }); // Selects and number inputs container.querySelectorAll('select[data-field], input[type=number][data-field]').forEach(el => { el.addEventListener('input', e => { const l = findLine(e.target.dataset.id); if(!l) return; const field = e.target.dataset.field; l[field] = (e.target.type === 'number') ? +e.target.value : e.target.value; renderSVG(); }); }); // Bold / Italic toggles container.querySelectorAll('.tog').forEach(btn => { btn.addEventListener('click', e => { const l = findLine(btn.dataset.id); if(!l) return; const field = btn.dataset.field; l[field] = !l[field]; btn.classList.toggle('active', l[field]); renderSVG(); }); }); // Align buttons container.querySelectorAll('.align-btn').forEach(btn => { btn.addEventListener('click', e => { const l = findLine(btn.dataset.id); if(!l) return; l.align = btn.dataset.align; container.querySelectorAll(`.align-btn[data-id="${l.id}"]`).forEach(b => b.classList.toggle('active', b.dataset.align === l.align) ); renderSVG(); }); }); // Delete buttons container.querySelectorAll('.del-btn').forEach(btn => { btn.addEventListener('click', e => { lines = lines.filter(l => String(l.id) !== btn.dataset.id); renderCards(); renderSVG(); }); }); } function findLine(id) { return lines.find(l => String(l.id) === String(id)); } function updatePreviewText(line) { const el = document.getElementById(`lpv-${line.id}`); if(el) el.textContent = line.text || 'empty'; } // ── Build SVG (live preview version — uses live text for speed) ── function buildSVGMarkup(forExport = false) { const w = +canvasW.value || 1000; const h = +canvasH.value || 500; const pad = +paddingEl.value || 40; const spacing = +globalSpacing.value || 1.25; const vAlign = vAlignEl.value; const activeLines = lines.filter(l => l.text.trim()); // Calculate total block height for vertical alignment const lineHeights = activeLines.map(l => l.size * spacing); const totalH = lineHeights.reduce((a,b) => a+b, 0); let startY; if(vAlign === 'top') startY = pad; else if(vAlign === 'bottom') startY = h - pad - totalH; else startY = (h - totalH) / 2; // center const textEls = activeLines.map((line, i) => { const prevHeights = lineHeights.slice(0,i).reduce((a,b)=>a+b,0); const y = startY + prevHeights + line.yOff; let x, anchor; if(line.align === 'left') { x = pad + line.xOff; anchor = 'start'; } else if(line.align === 'right') { x = w - pad + line.xOff; anchor = 'end'; } else { x = w/2 + line.xOff; anchor = 'middle'; } const weight = line.bold ? '700' : '400'; const style = line.italic ? 'italic' : 'normal'; if(forExport) { // For export: use text element (path conversion done via canvas trick below) return `
`; } // ── Render preview ── function renderSVG() { const w = +canvasW.value || 1000; const h = +canvasH.value || 500; previewDims.textContent = `${w} × ${h} px`; const markup = buildSVGMarkup(false); svgPreview.setAttribute('viewBox', `0 0 ${w} ${h}`); svgPreview.setAttribute('width', w); svgPreview.setAttribute('height', h); svgPreview.style.maxWidth = '100%'; svgPreview.style.maxHeight = 'calc(100vh - 260px)'; svgPreview.innerHTML = markup.replace(/^