Meshverloopgenerator
Kies het aantal controlepunten
Meer punten maken meer kleurgebieden. Bij een ander raster blijven bestaande kleuren waar mogelijk behouden.
Kleuren, posities en geëxporteerde illustraties blijven in deze browser. Funnel-URL's bevatten alleen de stap en attributieparameters.
Verloop bewerkenMaak een vloeiende, veelkleurige achtergrond met 4, 6 of 9 verplaatsbare punten. Kies elke kleur, sleep punten over het canvas, probeer een zorgvuldig samengestelde willekeurige paletkeuze en exporteer het resultaat als SVG of PNG. Je kunt ook een CSS-benadering met overlappende radiale verlopen kopiëren. Het project blijft tijdens het bewerken in dit browsertabblad.
Een verloop met mesheffect maken
-
1
Kies het raster
Begin met 4, 6 of 9 controlepunten. Meer punten zorgen voor meer afzonderlijke kleurgebieden.
-
2
Kies de kleuren
Gebruik de kleurkiezer van elk punt. De editor bewaart zescijferige HEX-kleuren.
-
3
Verplaats de punten
Sleep een punt, voer de horizontale en verticale positie in of gebruik de pijltoetsen.
-
4
Kies het formaat
Selecteer een liggend, breedbeeld- of vierkant formaat voor SVG en PNG.
-
5
Exporteer het ontwerp
Download PNG of SVG, of kopieer de CSS-benadering met radiale verlopen.
Hoe de drie uitvoerformaten worden gemaakt
- PNG gebruikt dezelfde afstandsgewogen kleurmenging als het voorbeeld. Bij een andere beeldverhouding worden dezelfde relatieve punten in de nieuwe afmetingen geplaatst.
- SVG legt radiale verlopen over elkaar op dezelfde controlepunten en blijft scherp bij vergroten.
- CSS maakt per punt een laag met
radial-gradient()boven een basiskleur, zonder afzonderlijk afbeeldingsbestand.
SVG en CSS gebruiken dezelfde projectgegevens, maar zijn lichte benaderingen van een mesh. Hun pixels zijn niet identiek aan die van de PNG.
Tips voor het kleurenpalet
- Verwante tinten leveren meestal rustige overgangen op.
- Contrasterende tinten maken de grenzen tussen gebieden sterker.
- Willekeurige paletten zijn een beginpunt en garanderen geen leesbaarheid.
- Controleer het contrast van tekst, pictogrammen en bedieningselementen op de uiteindelijke achtergrond.
Controlepunten plaatsen
Sleep een genummerd punt in het voorbeeld of geef het focus en gebruik de pijltoetsen. Houd Shift ingedrukt om vijf procentpunten per keer te bewegen. Met de horizontale en verticale velden kun je een exacte positie invoeren.
Punten mogen tot aan de rand komen. Dicht bij elkaar geplaatste punten bundelen hun kleuren; met meer afstand krijgt elke kleur meer ruimte.
Veelvoorkomende toepassingen
- Achtergronden voor heldersecties en sectiescheidingen.
- Kaarten voor sociale media en videominiaturen.
- Achtergronden voor presentaties en illustraties.
- Startschermen en decoratieve vlakken.
PNG benadert het voorbeeld het best. Gebruik SVG om scherp te schalen, of CSS voor een bewerkbare achtergrond zonder los afbeeldingsbestand.
Privacy en browseropslag
Kleuren, posities en resolutie blijven in het browsergeheugen en in sessionStorage. Ze worden niet toegevoegd aan funnel-URL’s of de server-status. De tool kan vastleggen dat er is geëxporteerd, zonder projectwaarden mee te sturen.
Het project kan maximaal zes uur uit sessionStorage worden hersteld zolang het huidige tabblad openstaat. Bij het sluiten wordt het doorgaans eerder verwijderd. Download of kopieer daarom wat je wilt behouden.
Veelgestelde vragen
Ze gebruiken verschillende rendermethoden. PNG mengt pixels naar afstand, terwijl SVG en CSS radiale verlopen stapelen. De kleuren en posities zijn gelijk, maar de afzonderlijke pixels niet.
Ja. Sleep een punt, gebruik de positievelden of geef het focus en druk op de pijltoetsen. Houd Shift ingedrukt voor grotere stappen.
De editor bewaart zescijferige HEX-kleuren. Gebruik de kleurkiezer of zet RGB of HSL eerst om naar HEX.
Nee. De gekopieerde CSS benadert het effect door standaard radiale verlopen te stapelen.
Het kan maximaal zes uur uit sessionStorage worden hersteld in het huidige tabblad. Bij het sluiten wordt het normaal eerder verwijderd. Het project gaat niet naar onze servers of funnel-URL’s.
Gerelateerde tools
ASCII-tabelreferentie
Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.
HTML-tekenreferentie
Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.
Sneltoetsenoverzicht
Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.
ASCII naar binair-converter
Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.
Binair naar hex-converter
Converteer binaire invoer naar een gewone hexwaarde in hoofdletters. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.
HAR-bestandsviewer
Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.