SVG Backgrounds

Sfondi e motivi grafici pronti da copiare nei siti

Cosa fa

Una raccolta di sfondi SVG leggeri da copiare e incollare nei siti web, con una parte gratuita e una a pagamento.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: raccolte premium a pagamento: il modello classico delle risorse per designer.

Rendilo tuo

Sfondi e grafiche pronte per le pagine create con Lovable o Bolt.
Pacchetti a tema per le festività italiane.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Sfondi Leggeri": una raccolta di sfondi SVG generati dal codice (onde, punti, griglie, forme sfumate) da personalizzare con i propri colori e copiare nel proprio sito come CSS: pesano pochi KB. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Galleria degli sfondi con anteprime a tutta larghezza
2. Editor dello sfondo: colori, densità, angolo, opacità con anteprima dal vivo
3. Copia come CSS, SVG o immagine PNG
4. Collezioni: i miei sfondi salvati (Pro)
5. Pagina Pro

Stile: da designer: sfondo bianco, nero #0A0A0A, accento viola #8B5CF6, carattere "Inter", anteprime grandi che mostrano lo sfondo dietro un finto titolo. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- "sfondi": nome, tipo di generatore, parametri predefiniti, gratuito o Pro
- "salvati": sfondo, parametri scelti, nome, collegati all'utente

Regole di sicurezza obbligatorie:
- la galleria è pubblica; i generatori Pro funzionano solo per gli abbonati
- ogni utente vede solo i suoi salvati

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Sfondi generati dal codice

Ogni sfondo è un piccolo generatore: una funzione che, dati colori e parametri, scrive il codice SVG (codice nei Dettagli tecnici). Così pesa pochissimo, resta nitido a qualsiasi dimensione, e ogni utente ottiene una versione con i suoi colori.

L'editor mostra lo sfondo dietro un finto titolo e un pulsante, per giudicarlo nel contesto, con controlli per colori, densità, scala, angolo e opacità.

Copia in tre formati: CSS con l'SVG incorporato (background-image), file SVG, oppure PNG per chi usa strumenti che non accettano SVG.

4. Collezioni e Pro

Pro: tutti i 40 generatori (gratis 10), salvataggio delle versioni personalizzate in collezioni, animazione leggera di alcuni sfondi in CSS, e licenza per l'uso nei progetti dei clienti.

Pagina della licenza chiara: gli sfondi si possono usare in progetti propri e dei clienti, non rivendere come raccolta.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 12 € una volta sola. Il pagamento sblocca tutti i generatori, le collezioni, le animazioni e la licenza per i clienti.

A pagamento riuscito il webhook imposta "piano" a "pro" nella tabella "profili", sulla riga dell'utente indicata in client_reference_id.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Peso: verifica che il CSS copiato di ogni sfondo pesi meno di 5 KB e funzioni incollato in una pagina vuota.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Uno sfondo a onde generato dal codice

Crea un SVG con più onde sovrapposte nei colori scelti, e lo trasforma in una riga di CSS pronta da incollare.

type Onde = { colori: string[]; larghezza?: number; altezza?: number; ampiezza?: number; ondulazioni?: number };

export function svgOnde({ colori, larghezza = 1440, altezza = 560, ampiezza = 40, ondulazioni = 3 }: Onde): string {
  const strati = colori.map((colore, n) => {
    const base = altezza * (0.45 + (n * 0.5) / colori.length);   // ogni onda più in basso
    const punti: string[] = [];
    for (let x = 0; x <= larghezza; x += 20) {
      const y = base + Math.sin((x / larghezza) * Math.PI * 2 * ondulazioni + n) * ampiezza;
      punti.push(x + "," + y.toFixed(1));
    }
    return '<path d="M0,' + altezza + " L" + punti.join(" L") + " L" + larghezza + "," + altezza + ' Z" fill="' + colore + '"/>';
  });
  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + larghezza + " " + altezza +
    '" preserveAspectRatio="none">' + strati.join("") + "</svg>";
}

// SVG -> riga di CSS (codificato per stare dentro url(...))
export const comeCss = (svg: string) =>
  "background-image: url(\"data:image/svg+xml," + encodeURIComponent(svg) + "\"); background-size: cover;";

// comeCss(svgOnde({ colori: ["#C4B5FD", "#8B5CF6", "#6D28D9"] }))

Pezzi comuni a tutti i progetti

Glossario

SVG: Un formato di immagine fatto di forme descritte con il codice: leggero e nitido a qualsiasi dimensione.