14

🌈 Wonderful tools for creating secondary visual elements for your website

 2 years ago
source link: https://dev.to/koddr/wonderful-tools-for-creating-secondary-visual-elements-for-your-website-3bj0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Introduction

Hey, DEV people! 👋

Here's a small selection of time-tested online tools that can seriously reduce the time it takes to develop a visual concept for your next website (and beyond). All tools will be aimed at creating secondary visual additions to the UI, such as waves, blobs, patterns and animated backgrounds & gradients.

👌 Disclamer: I usually don't care for articles in this style, but there are too many of these tools accumulated to do separate articles on each. So don't worry, I will continue to delight you with in-depth articles and not go off to “Top X”-like articles!

OK, here we go! 👇

📝 Table of contents

Blobbb

The Blobbb project is an excellent example of the most convenient tool for creating random blobs with comprehensive settings.

There aren't many options, but that's really all you need:

  • Fill color;
  • Stroke color;
  • Gradient color;
  • Presets of patterns;

Example “copy-paste” output:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#673ab7" d="M71.3,-23.4C80.9,6.4,69.3,42.9,44.3,61.1C19.4,79.2,-19,79,-36.2,63.3C-53.4,47.6,-49.4,16.4,-39.9,-13.4C-30.3,-43.1,-15.2,-71.5,7.8,-74C30.8,-76.6,61.7,-53.3,71.3,-23.4Z"  transform="translate(100 100)" />
</svg>
Enter fullscreen modeExit fullscreen mode

↑ Table of contents

Animated Gradient Background Generator

Animated Gradient Background Generator. The name of this tool speaks for itself. Completely based on CSS features, no JavaScript.

Few options, but it's even good, as this animated background is much easier to implement in an existing website:

  • Set of colors;
  • Angle of color movement;
  • Speed of animation;

Example “copy-paste” output:

.gradient-background {
  background: linear-gradient(300deg,deepskyblue,darkviolet,blue);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
Enter fullscreen modeExit fullscreen mode

↑ Table of contents

SVG Shape Dividers Creator

SVG Shape Dividers Creator is a really useful tool for generating content splitter waves (and more) for your website. It's based on plain CSS and can easily be built into any project.

A huge number of options for you to choose from:

  • Wave position & color;
  • Short & Long axis;
  • Animation duration;
  • Support mobile and tablet in-app views;

And my favorite feature is over 35 free wave patterns like this one:

Example “copy-paste” output:

.shapedividers_com-9933 {
  overflow: hidden;
  position: relative;
}

.shapedividers_com-9933::before {
  content: '';
  font-family: 'shape divider from ShapeDividers.com';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  background-size: 100% 90px;
  background-position: 50% 0%;
  background-image: url('data:image/svg+xml;
    charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23fbd8c2"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23fbd8c2"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23fbd8c2"/></svg>');
}

@media (min-width:2100px) {
  .shapedividers_com-9933::before {
    background-size: 100% calc(2vw + 90px);
  }
}
Enter fullscreen modeExit fullscreen mode

↑ Table of contents

Wicked Backgrounds

Wicked Backgrounds is a tool for creating beautiful and fully customizable wavy SVG backgrounds. The authors did an impressive job on this online tool, so it has a nice design and UX.

There are not as many options as I would have liked (for example, I would still like to control the curvature of each of the waves), but for most tasks this is enough:

  • Wave count;
  • Color with color mode;
  • Angle of wave rotation;
  • Randomize wave's shape;

Example “copy-paste” output:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1920 1080">
  <rect width="1920" height="1080" fill="#000000">
  </rect>
  <g transform="matrix(1.15,0,0,1.15,-133.8815414428709,-81)">
    <path d="M0,-1080C-16.109467690272208,-987.3534782755676,-76.3233648777778,-696.694101273433,-96.65680614163324,-524.1208696534056C-116.99024740548867,-351.54763803337823,-154.87768348144857,-186.2317926518452,-122.0006475831326,-44.56061027983549C-89.12361168481664,97.11057209217424,79.74857135483008,205.34394482433856,100.6054092482625,325.9062245786526C121.46224714169493,446.46850433296663,9.837258542218564,527.7054581855967,3.1403797774619306,678.8130682460487C-3.5564989872947024,829.9206783065007,62.322865374741006,1081.166449881082,60.424136659722706,1232.5518849413647C58.525407944704405,1383.9373200016475,1.8186969306392573,1432.5509927646397,-8.25199251264786,1587.1256786077456C-18.322681955934975,1741.7003644508516,-1.37533208544131,2064.5209464346244,0,2160L 1920 2160 L 1920 -1080 Z" fill="url("#SvgjsLinearGradient1000")">
    </path>
    <path d="M320,-1080C316.5479274166343,-988.0283947909271,306.52547890189555,-735.2750389899924,299.28756449980597,-528.1703687455629C292.0496500977164,-321.0656985011334,261.21331693651325,-72.3552689085293,276.57251358746254,162.62802146657714C291.9317102384118,397.6113118416836,400.5251410555341,654.6011081064328,391.44274440550174,881.7293735050758C382.3603477554694,1108.857638903719,233.98525775485209,1312.352509442615,222.07813368726846,1525.3976138584358C210.17100961968484,1738.4427182742565,303.67968894787805,2054.232935643073,320,2160L 1920 2160 L 1920 -1080 Z" fill="url("#SvgjsLinearGradient1001")">
    </path>
    <path d="M640,-1080C649.4269886515594,-936.4225056950557,686.3731109342367,-488.6591163963009,696.5619319093564,-218.53503417033437C706.7507528844761,51.589048055632134,720.4152486002066,295.2526065023857,701.1329258507185,540.7444933557989C681.8506031012304,786.2363802092121,591.0568163875477,984.5403691761117,580.867995412428,1254.4162869501451C570.6791744373082,1524.2922047241786,630.1446659020713,2009.0693811583576,640,2160L 1920 2160 L 1920 -1080 Z" fill="url("#SvgjsLinearGradient1002")">
    </path>
    <path d="M960,-1080C972.2722028771731,-999.3689936463607,1044.1924579458341,-778.7088223996913,1033.6332172630384,-596.2139618781637C1023.0739765802426,-413.7191013566361,918.9245023444137,-189.21592185427187,896.6445559032254,14.96916312916585C874.3646094620372,219.15424811260357,899.6643029716962,467.86234802809037,899.9535386159089,628.8965480224628C900.2427742601216,789.9307480168352,904.6358103185602,827.5961407572682,898.3799697685013,981.1743630954002C892.1241292184424,1134.7525854335322,852.1484902769726,1353.8949425671544,862.4184953155557,1550.3658820512544C872.6885003541388,1746.8368215353544,943.7364158859259,2058.394313675209,960,2160L 1920 2160 L 1920 -1080 Z" fill="url("#SvgjsLinearGradient1003")">
    </path>
    <path d="M1280,-1080C1294.0939719360897,-1011.9782300101334,1355.3563163190304,-811.9909292764734,1364.5638316165382,-671.8693800608005C1373.771346914046,-531.7478308451276,1328.2045657020783,-382.7469685563632,1335.2450917850465,-239.27070470596277C1342.2856178680147,-95.79444085556233,1406.6454171746414,37.69214417447009,1406.8069881143476,188.98820304160216C1406.968559054054,340.28426190873427,1348.3747769475092,507.82694083248896,1336.2145174232842,668.5056484968296C1324.0542578990592,829.1843561611703,1361.84281542639,971.2505198492404,1333.8454309689978,1153.0604490276464C1305.8480465116056,1334.8703782060525,1177.2044491737645,1591.5419650718736,1168.2302106789316,1759.365223567266C1159.2559721840987,1927.1884820626583,1261.371701779822,2093.227537261211,1280,2160L 1920 2160 L 1920 -1080 Z" fill="url("#SvgjsLinearGradient1004")">
    </path>
    <path d="M1600,-1080C1613.673863873465,-1017.7817217047276,1698.5138879669723,-846.6548339269276,1682.0431832407908,-706.6903302283656C1665.5724785146092,-566.7258265298036,1511.9988180998816,-370.06959119239764,1501.1757716429108,-240.21297780862784C1490.35272518594,-110.35636442485807,1599.144792699853,-59.34818674406321,1617.1049044989652,72.449350074253C1635.0650162980774,204.24688689256922,1603.7020308745543,417.14525790809193,1608.9364424375835,550.5722431012696C1614.1708540006127,683.9992282944472,1648.9919203907264,718.8597923126912,1648.5113738771402,873.0112612333191C1648.030827363554,1027.1627301539472,1629.3649936216461,1340.8009575005751,1606.0531633560663,1475.4810566250376C1582.7413330904865,1610.1611557495,1509.6492528430053,1567.0053654176002,1508.640392283661,1681.091855980094C1507.6315317243166,1795.1783465425876,1584.7733987139436,2080.1819759966825,1600,2160L 1920 2160 L 1920 -1080 Z" fill="url("#SvgjsLinearGradient1005")">
    </path>
  </g>
  <defs>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1000">
      <stop stop-color="#000000" offset="0">
      </stop>
      <stop stop-color="#000000" offset="0">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1001">
      <stop stop-color="#2a2a2a" offset="0">
      </stop>
      <stop stop-color="#2a2a2a" offset="0.16666666666666666">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1002">
      <stop stop-color="#555555" offset="0">
      </stop>
      <stop stop-color="#555555" offset="0.3333333333333333">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1003">
      <stop stop-color="#7f7f7f" offset="0">
      </stop>
      <stop stop-color="#7f7f7f" offset="0.5">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1004">
      <stop stop-color="#aaaaaa" offset="0">
      </stop>
      <stop stop-color="#aaaaaa" offset="0.6666666666666666">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1005">
      <stop stop-color="#d4d4d4" offset="0">
      </stop>
      <stop stop-color="#d4d4d4" offset="0.8333333333333334">
      </stop>
    </linearGradient>
  </defs>
</svg>
Enter fullscreen modeExit fullscreen mode

↑ Table of contents

Basic Pattern Repository

Basic Pattern Repository is a just SVG for your delight! A distinctive feature of the project is the ability to load the necessary pattern through the API. This approach not only saves development time, but also keeps your CSS code untouched.

To get a JSON response containing all available patterns as entries:

https://patterns.helloyes.dev/api/patterns.json
Enter fullscreen modeExit fullscreen mode

To get a JSON response for a specific pattern:

https://patterns.helloyes.dev/api/pattern/<PATTERN NUMBER>.json
Enter fullscreen modeExit fullscreen mode

↑ Table of contents

Figen

Figen is a free online post cover and background generator tool for social media, like Twitter, Facebook, Instagram, LinkedIn and so on.

Saves a lot of time, and it looks perfect! I, personally, use it for some of my Twitter posts and placeholders for projects.

😉 Note: By the way, follow me to keep up to date with new articles!

The settings are wealthy and include:

  • Image size with presets;
  • Shapes support;
  • Background and gradient colors;
  • Upload photo for background;
  • Text editor;

Unfortunately, the format of the tool suggests using it immediately in applications, so the output will be an optimized PNG file rather than SVG code. For example, this one:

↑ Table of contents

Photos and videos by

  • Tools authors and Vic Shóstak

If you want more articles like this on this blog, then post a comment below and subscribe to me. Thanks! 😘


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK