thednp / kute.js

KUTE.js is a JavaScript animation engine for modern browsers.

Home Page:http://thednp.github.io/kute.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Logo for KUTE.js 😊

davidjaldred opened this issue Β· comments

Great library! Noticed you didn't have a logo yet and thought I'd submit one.

What do you think of this?

kutejs

Thanks, I like it.

Hey there! You still kute?

Of course!

Well, get ready for a big new version coming very soon to your PC, I was thinking maybe we can have more variations of this logo, perhaps more tech-ish?

Will also need an SVG source for some cool animations :)

That's great news, thanks for your hard work!

What did you have in mind? Change of colours or new font perhaps? I don't have a lot of time at the moment, I'll see what I can do, or maybe someone else could have a go?

You actually already have an outlined version of the logo as an SVG in my pull request #86, but here's the SVG for the version above:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 400">
  <style>
    .primary{fill:#27212b}.secondary{fill:#fff}.brand{fill:#ff4367}
  </style>
  <path class="primary" d="M0 0h1400v400H0V0z"/>
  <path class="secondary" d="M373.4 287.1c-6.1-5.1-10.2-19.3-19.9-26.4-24.2-17.7-42.2-5.9-30.4 7.9 5.6 6.6 10.7 5.2 15.9 9.9 7.9 7.3 1.2 16-6.1 15.4-4.1-.3-6.5-4.1-15-6.9-13.7-4.6-33.1-4.4-64.7-9.6-43-7-90.6-43.6-71.5-94.7 17.8-47.5 38.6-75.4 89.4-75.4 67 0 83.9 55.3 97.6 82.5 6.4 12.7 8.9 10.3 14.2 17.6 4.8 6.7.6 18.1-9 14.9-21.1-7-30.3 10.7-9.1 24.7 5.7 3.8 23.3 5.9 29 9.7 21.1 14.1-1.6 46.1-20.4 30.4z"/>
  <path class="brand" d="M311.3 196.4l-5.1-6.5c-7.9 10.1-6.2 9.9-14 0l-5.1 6.5c-2 2.6-5.8-.5-3.8-3 9.9-12.7 7.8-12.9 15.9-2.5 8-10.2 5.8-10.5 15.9 2.5.8 1.1.5 2.6-.6 3.4-1 .7-2.4.5-3.2-.4zm-90 0l-5.1-6.5c-7.9 10.1-6.2 9.9-14 0l-5.1 6.5c-2 2.6-5.8-.5-3.8-3 9.9-12.7 7.8-12.9 15.9-2.5 8-10.2 5.8-10.5 15.9 2.5.8 1.1.5 2.6-.6 3.4-1 .7-2.4.5-3.2-.4z"/>
  <path class="secondary" d="M394.4 226.3c-5.1 8 9.2 17.3 14.4 9.3 5.1-7.9-9.2-17.2-14.4-9.3z"/>
  <path class="primary" d="M273.9 184.5c-.8 10.4-9.5 18.4-19.8 18.4-10.4 0-19-8-19.8-18.3 0-.8.5-1.5 1.3-1.5h36.9c.8-.1 1.4.6 1.4 1.4z"/>
  <path class="primary" d="M308.4 169.9c-4.5-3.8-13.8-3.8-18.3 0-4.3 3.7-10.1-2.8-5.7-6.6 7.8-6.6 21.9-6.6 29.7 0 4.4 3.7-1.4 10.3-5.7 6.6z"/>
  <path class="primary" d="M223.3 169.9c-4.5-3.8-13.8-3.8-18.3 0-4.3 3.7-10-2.8-5.7-6.6 7.8-6.6 21.9-6.6 29.7 0 4.3 3.7-1.5 10.4-5.7 6.6z"/>
  <path class="brand" d="M583.5 246.7c-.1 5.8-16.7 27.2-26.7 26.1-15.8-1.7-45.6-42.6-45.6-42.6s3.7 29.1 1 37.6c-3 9.6-39 8.3-39.7 2.8-3.4-27.1-6.4-144.5-2.6-148.1 3.1-2.9 38.8-4.3 40.1 1.5 1.8 7.5 0 42.4 0 42.4s32-40.2 43.6-43.6c4.1-1.2 29.1 23.9 28.4 28.4-1.3 8.4-47 47-47 47s48.7 39.2 48.5 48.5zM713.1 125c2.6 3.9 16.9 104.8-9.9 135.8-15.3 17.7-69.3 19.6-88.7-.4-26.6-27.3-13.7-132.8-11-135.9 3.9-4.5 31.9-4.1 38.7.5 7 4.7-11.6 106.5 16.2 106.5s9-99.8 15.2-106.5c6.9-7.4 37.7-2.8 39.5 0zm136.2.5c2.1 4.6 5.3 29-.1 35.6-3.2 3.9-37.2 2.6-37.2 2.6s12.1 92 7.7 102.8c-3.8 9.3-35.7 8.3-40.7 4.7-9.2-6.5-6.3-105.4-6.3-105.4s-31.3 8.1-36.5-.1c-3.8-5.9-6.3-33.9-1.4-37.6 9.5-7.2 109.2-14.5 114.5-2.6zm58.5 90c.2 7.4.8 15.2.6 22.7 13.7-3 61.8-3.3 65 2.2 3.5 6 5.1 27 .8 31.8-3.3 3.6-100.3 2.5-101.7-2.9-8.2-31.5-7.8-130.8-.7-144.2 3.2-6 96.1-4.9 99 1.8 1.8 4.2 5.5 27.1.3 33.8-4.3 5.5-51.7 2.3-64.8 1.2.5 6.2.7 15.6.8 20.6 0 0 49.7-5.9 53 1.3 3.2 6.9 6.6 23.8 1.5 31-4.1 5.5-53.8.7-53.8.7z"/>
  <path class="secondary" d="M1034.4 270.4c-3.3 3.8-27.9 4.9-31.5.6-3.2-3.8-4.5-27.7 0-30.9 3.4-2.4 27.1-3.5 30.3-.6 4.3 3.9 4.7 26.8 1.2 30.9zm90.2-89.4c3.3 4.6 6.4 59.4-5.6 79-11.4 18.7-46.7 17-58.8 2.4-2-2.5-.6-21.6 7.6-23 7.8-1.4 15.8 14.8 28.8 3.7 10.6-9 5.3-39.4 5.3-39.4s-30.9 2.7-34.2-3.8c-4.1-8.3-2.9-18.5-.3-21.3 3.7-4.3 51.7-5.2 57.2 2.4zm50.1 21.2c-3.2 2.9-1.8 8.1.9 9.8 8.6 5.3 30.1.3 38 6.6 12.4 10.1 11.4 38.4.1 47.3-13.5 10.6-60.1 10.1-68.7-.6-3.6-4.5-3.6-18.3 3.4-19.6 19.1-3.5 28.9 6.2 42.8 1.6 3.8-1.2 3.8-5.4 2-8.2-4.6-7.1-27.8-4.4-37.1-8.5-16.3-7.1-16.7-34.7-5.9-47.4 8.3-9.8 54.5-9.8 64.6-1.6 5.5 4.5 4.2 17.5-1.8 21.2-9.3 5.5-31.8-6.5-38.3-.6z"/>
</svg>

Since we're going for a very specific audience and we're talking about KUTE.js, let's talk some ideas:

  • we now have it all ES6/ES7 code (I need to complete svg and attr, plus couple extra), all that jazz import, export rollup is now a thing in KUTE.js, I can hardly believe it myself, at no expense on performance or functionality, so the logo should speak about some "modularity inside"
  • the new version will come in 3 dist: base, regular, extra, all with different/additive feature sets (I for instance am using mostly the base, no yoyo+repeat, no pause+resume,very light and fast), but the regular is somewhat equivalent to current dist, while the extra will come completed later
  • now it's hard to argue about a kute drop of light coming to your screen, doing some fancy versus my idea of a borg-like sphere, made of parts of different colors and leaving a trail behind, something like a comet with a face rising up, in the same flying direction (my kind of idea)
  • as for the logo text, it needs to be BOLD (KUTE) regular(js), I believe (js) in a circle can go nice, some possible fonts I like: Exo, Teko, Righteous, Modak, Play, Chango, Titillium Web, you can have a play with your kind of fonts too

Coming to ya!

Fantastic work and great animations! The new site looks professional and modern. Love it!