Генератор svg для html

Generators

Haikei is built around generators. Each generator has a unique set of properties and features to help you discover and create unlimited design assets.

Blob

A classic! Originating with Blobmaker, this generator allows you to generate cool organic svg shapes within your chosen contrast and complexity parameters. Start designing

Wave

The wave generator uses an algorithm that focuses on creating harmonious visuals using one or more waves. These waves can be positioned at the top, bottom, left, or right of the canvas. Start designing

Blurry Gradient

The blurry gradient generator makes it easy to create modern, blurry gradients. Add any two colors and randomize to get a different gradient composition every time. Start designing

Circle Scatter

Use this generator to create simple backgrounds using scattered circles. Constrain the circles to canvas to use the generator for patterns, or tweak the density and contrast to create unique design assets every time. Start designing

Blob Scene

Inspired by the simple blob, this generator allows you to create elegant backgrounds with organic shapes positioned in two opposing corners of the canvas and colors that transition beautifully. Start designing

Layered Waves

The layered waves generator follows a similar logic to the simple wave, with a few extra options. You can add multiple waves, decide the complexity and contrast of the waves, and color them in a gradient style based on one or two colors that you input. Start designing

Stacked Waves

The stacked waves generator helps you create visuals that fill out the canvas with elegant waves and soft color transitions. Align the waves either horizontally or vertically for subtle or bold visual effects. Start designing

Blob Scatter

The blob scatter generator enables you to decide the number, size and contrast of scattered organic shapes. Use it to create cool backgrounds or to generate patterns for your next project. Start designing

Low Poly Grid

The low poly grid generator uses an algorithm that creates a crumpled paper effect. Tweak the resolution of the triangles and the distortion of the background to create cool, colorful backgrounds. Start designing

Layered Peaks

Similarly to the waves generator, the layered peaks generator enables you to create great visuals that can be used as backgrounds for article covers, social media posts or as part of illustrations. Start designing

Stacked Peaks

The stacked peaks generator is a variation of the stacked waves, with similar options for generating visuals where the peaks fill out the canvas. Align them from left to right or top to bottom to generate beautiful visuals. Start designing

Polygon Scatter

From triangles to hexagons and more, pick a polygon with 3 to 9 edges and generate cool visuals. Play with the number, size, and contrast to create various visuals that add a cool background to your designs. Start designing

Layered Steps

While similar to the waves and layered peaks generators, the simple steps generator allows you to create stylized assets that are visually very different. Use them as a background for text, images, illustrations or simply as a background pattern. Start designing

Stacked Steps

A generator that allows you to create colorful textured backgrounds using shades of a given color. Use it to give texture to an otherwise solid color background. Start designing

Symbol Scatter

Just like the circle, blob, and polygon scatter, this generator allows you to create single visuals or cool patterns. Choose between a growing list of symbols to create awesome visuals. Start designing

Источник

fffuel is a collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds

🚀 Here you’ll find a collection of free SVG makers to create cool backgrounds, seamless patterns, gradients, textures, shapes and blobs. Use the generated vector patterns directly on the web or in your favorite design app.

🤹‍♂️ The SVG and graphic creation tools on fffuel allow you to easily customize the final result so that the generated graphics are unique and fit with the rest of your design seamlessly.

✨ SVG stands for Scalable Vector Graphics and using SVGs on the web offers many benefits. For example, SVGs can be scaled to any size without ever losing visual quality, they can be edited later-on by tweaking the underlining markup and they can often be more lightweight than images that have been saved to a raster format like PNG or JPEG.

🔧 If you need to convert the generated SVGs over to PNG, you can use the SVG to PNG conversion tool.

🖼️ If you want to use the SVGs as background patterns, you can use the base64 encoder so that you can add the background images inline in your CSS.

🎨 Plus, I’ve also created some tools to help with converting color codes or picking great colors for your designs. For example, try out the color picker or the color palette generator.

Hey there! 👋 I’m Seb and I’m creating fffuel. You can find me on

P.S. Find me elsewhere on the web over at muted.io, where I create visual & interactive references for learning music online 🎹

Источник

Create Beautiful SVG Shapes

Change the number of angles, complexity, and colors and gradient to create different shapes.

🎲 Step 2: Randomize

Press the randomize button until you find an SVG shape you like.

⬇️ Step 3: Download

Get the shape as an SVG, PNG or copy the code directly into your clipboard.

This website is built on Softr

Join 150,000+ companies and creators already using Softr.

About Shape Generator

SVG Shape Generator is a free tool made by Softr for creating random organic-looking shapes that can be used to add a nice touch to your landing page design, video thumbnail, social media banner, or any other visual. It can be really useful if you don’t have the design skills to create custom graphics but want to come up with something unique instead of using stock illustrations or something like that. We at Softr had been using such shapes in our designs quite often and, at some, point decided to make our own tool for quickly generating organic-looking shapes. The right-side image showcases our new sign in/sign up blocks, and a blob shape is used in the background, encompassing the blocks and serving as a sort of a frame for them. We’ve used the image to provide an update about the new feature in our social media. So, this is just one use case, but there are really a lot of potential applications.

Very often, we were also applying a gradient when creating such shapes manually (there’s a slight gradient in the above image as well), so we thought it would be good to add that feature to the Shape Generator as well. And we also added the outline option to allow generating blobs without a fill. We hope that this tool will be useful for others as well. Enjoy!

Источник

Generate unique SVG design assets

Haikei is a web app to generate stunning visual content – ready to use with your design tools and workflow.

Free, no signups, no credit cards.

Discover + create unlimited visuals for your designs

Growing number of generators

Get started with one of our flexible SVG generators that will help you create unique data-driven shapes without hassle. Choose between stacked or layered waves, steps, peaks, blobs, symbols, grids, gradients, and much more.

Easy to integrate into your workflow

Whether you are creating a poster or a website, integrating Haikei into your workflow is easy! Export your background as PNG, SVG and continue working on it in any vector editing tool, CMS or code base.

Customizable visuals

Our generators will help you create unique visuals that look good every time. Play with the settings to find the right parameters and use the dice button to generate a new visual every time.

Designs ready for production

Choose from a number of common canvas sizes to help you generate cool backgrounds, ready to share. You can also tweak the size and compare different generators across formats. Haikei will adapt to your needs.

Use cases

Haikei is primarily a creative tool that you can use in many different ways. Here are some examples of where Haikei can change the way you work.

Haikei for UI Design

Whether you are designing login screens, banner backgrounds, product showcases, or just need some cool visuals for your marketing pages, Haikei has you covered. Select one of our generators, choose your canvas size and add your brand colors to make the visuals yours.

Haikei for slide decks

Getting slide decks to look good can be time-consuming. Luckily, Haikei can make things easier! Choose a design for your presentation from one of our 15 generators, then generate scores of unique visuals in the same style for your slides.

Haikei for blog posts

The hardest thing before hitting that publish button for your blog posts is finding a cool visual. Use one of our generators to create a stunnig cover with your brand colors in a format that suits you best in just a few clicks.

Haikei for social media

Twitter headers, Linkedin posts, Instagram stories, Haikei can cover it all. Choose a generator and adjust the canvas size to get beautiful visuals ready to share with your network!

Haikei for UI Design

Whether you are designing login screens, banner backgrounds, product showcases, or just need some cool visuals for your marketing pages, Haikei has you covered. Select one of our generators, choose your canvas size and add your brand colors to make the visuals yours.

Haikei for slide decks

Getting slide decks to look good can be time-consuming. Luckily, Haikei can make things easier! Choose a design for your presentation from one of our 15 generators, then generate scores of unique visuals in the same style for your slides.

Haikei for blog posts

The hardest thing before hitting that publish button for your blog posts is finding a cool visual. Use one of our generators to create a stunnig cover with your brand colors in a format that suits you best in just a few clicks.

Haikei for social media

Twitter headers, Linkedin posts, Instagram stories, Haikei can cover it all. Choose a generator and adjust the canvas size to get beautiful visuals ready to share with your network!

Get inspired!

Use Haikei to create stunning visual content for your website, apps, product showcase, and more! We can’t wait to see what you create with Haikei!

Источник