
CSS Shapes Editor for Chrome - jonphillips06
http://razvancaliman.com/writing/css-shapes-editor-chrome/
======
mattdesl
Nice! I've also been working on some vector tools in the browser:
[http://mattdesl.github.io/path-
illustrator/demo/advanced.htm...](http://mattdesl.github.io/path-
illustrator/demo/advanced.html)

I think dev-centric vector tools present a really good opportunity to improve
the workflow between devs and designers and change the way many of us design
web UI/animations. My main goals and interests:

\- modular tools that are not encased within a monolithic editor

\- animation/key frames

\- renderer agnostic (for use with canvas/WebGL/CSS/etc)

\- publishing path/animation state as a npm module, so that others could just
"npm install spinny-preloader"

\- ultimately building a suite of tools for more fluid motion graphics that
render in real-time in the browser, but look just as good as something from
After Effects

I wonder if some aspects of your tool could be reused for some of these goals.

~~~
artursapek
Your tool is nice. The idea of doing vector graphics like this in the browser
is very alluring. I worked on something similar for a long time, maybe you
would find it useful:

[https://github.com/artursapek/mondrian](https://github.com/artursapek/mondrian)

[http://mondrian.io](http://mondrian.io)

The original idea was also to create an animation tool which could export to
canvas code and/or SVG files with embedded JS. Ended up just being a generic
SVG editor.

I eventually couldn't keep committing the time to develop it, but it was a fun
project for a long while. Really got interesting when I started thinking about
algorithms for something like Pathfinder (unfinished work:
[http://artur.co/pathfinder.html](http://artur.co/pathfinder.html)) and a
freehand drawing tool which outputs cubic beziers (the crayon tool in my
example). Also fun was coming up with data structures for undo/redo (mine
still kind of suck).

Anyway, have fun with your project.

~~~
mattdesl
Wow, looks great. I had a strong feeling that even a "really simple SVG
editor" is an incredibly huge task for a single developer. Your app helps put
things in perspective. :)

I always find "monolithic remakes" to be doomed from the start. So my current
goal isn't to create the full app, but focus on it's different parts. Eg. the
path-illustrator should be modular and standalone, and easily integrated into
larger tools with perhaps different agendas. Same with timelines, SVG
import/export, etc.

------
ivanca
In 2011 I created a JavaScript to do exactly what CSS Shapes do:
[https://github.com/Ivanca/Creative-Text-
Boxes](https://github.com/Ivanca/Creative-Text-Boxes), it even works in IE6+.
It had a domain but due to lack of interest is now gone but there is still a
copy here: [http://nyudvik.com/ctb/](http://nyudvik.com/ctb/) , it has a GUI
tool to generate the code for any shape:
[https://www.youtube.com/watch?v=iZ0_wxz5WQM](https://www.youtube.com/watch?v=iZ0_wxz5WQM)

Off-topic: I'm looking for a remote part-time job as JavaScript Developer, if
anyone is interested write me an email (ivanca@gmail)

------
fenomas
CSS Shapes are still on the horizon, but not far off. Blink added the intent
to ship them in May [0], and Apple called them out as one of the new web
standards that will be in Safari 8 [1].

There's also a polyfill, incidentally:
[http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-
pol...](http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/)

[0]: [http://bit.ly/blinkintents](http://bit.ly/blinkintents)

[1]:
[http://9to5mac.files.wordpress.com/2014/06/screenshot-2014-0...](http://9to5mac.files.wordpress.com/2014/06/screenshot-2014-06-02-13-29-57.jpg)

------
bramgg
This looks awesome! Not really usable yet due to the lack of browser
support[0] (Chrome 37+ and Safari 8 with -webkit-), but it's this kind of
thing that rallies support for web standards.

[0] [http://caniuse.com/#feat=css-shapes](http://caniuse.com/#feat=css-shapes)

------
timothya
CSS Shapes are still pretty new; looks like support is only there in the
newest version of Chrome: [http://caniuse.com/#feat=css-
shapes](http://caniuse.com/#feat=css-shapes)

~~~
gooserock
I love that people are developing early tools for these things, but it looks
like this won't be usable for mainstream websites for _years_.

~~~
azakai
Not sure why you're getting downvoted, that's probably true, sad as it is.
Hopefully it won't be years, but it won't be months, either.

Even chrome and firefox, which auto-update their browsers in order to keep
everyone on the latest version - which should let websites use new features
earlier - seem to have around 1/4 to 1/3 of their users on old versions,

[http://cdn.arstechnica.net/wp-
content/uploads/2014/09/chrome...](http://cdn.arstechnica.net/wp-
content/uploads/2014/09/chrome-2014-08-640x480.png)

[http://cdn.arstechnica.net/wp-
content/uploads/2014/09/firefo...](http://cdn.arstechnica.net/wp-
content/uploads/2014/09/firefox-2014-08-640x480.png)

which is worrying.

------
LukeB_UK
I didn't know that CSS shapes was a thing. That's really cool.

~~~
TophWells
Me neither. Are they new?

------
mxfh
Since this is deep into type setting/layout territory what's the state of

    
    
        hyphens: auto
    

[https://developer.mozilla.org/en/docs/Web/CSS/hyphens](https://developer.mozilla.org/en/docs/Web/CSS/hyphens)

or is it still better to rely on adding soft hypens via script? Like
hyphenator.js
[https://code.google.com/p/hyphenator/](https://code.google.com/p/hyphenator/)

~~~
Semaphor
[http://caniuse.com/#search=hyphens](http://caniuse.com/#search=hyphens)

With no version of chrome supporting it it seems like a bad idea to rely on
it.

------
bambax
Wow, fantastic tool, and great examples. Thanks for sharing.

------
juanplusjuan
Cool! Can't wait for it to appear in a standard CMS (e.g. WordPress,
SquareSpace, Weebly). Seems like it's the perfect addition for professional
editors a la Scoop ([http://open.blogs.nytimes.com/2014/06/17/scoop-a-glimpse-
int...](http://open.blogs.nytimes.com/2014/06/17/scoop-a-glimpse-into-the-
nytimes-cms/))?

------
psteinweber
Side note: The use of the GIFs on the page really cuts to the chase and shows
immediately what everything is about. I only watch explanatory videos if I'm
really interested in a product, therefore appreciate this presentation.

------
zeroonetwothree
This is cool, but reading text with oddly-shaped images inside of it is pretty
annoying. I hope CSS shapes aren't going to be used excessively.

~~~
jdjb
Not to mention this is exactly the sort of "pixel perfect" design that we
should be discouraging, not encouraging. It doesn't seem like this technique
translates well to a flexible design philosophy by letting the browser choose
the best way to reflow text around elements (based on the amount of available
screen real estate).

~~~
untog
I don't think that's true. Looking at the video it seems like an ideal mix of
both worlds - non-standard shaped images will be floated with CSS, and text
will reflow and rewrap according to available size.

Sounds pretty flexible to me.

------
scoot
Just curious, why can't the shape be generated from the outline of the image
alpha with an offset, rather than having to be generated by hand?

~~~
fenomas
They can: [http://dev.w3.org/csswg/css-shapes/#shapes-from-
image](http://dev.w3.org/csswg/css-shapes/#shapes-from-image)

But note that this is a general spec for adding shapes to HTML elements.
Wrapping text around images is just one of many possible use cases.

------
grizzles
Why would one use CSS over SVG for this?

~~~
pkulak
Because it's for laying out text, not creating images.

~~~
pimlottc
It seems though that many (most?) use cases would be solved if image formats
supported non-rectangular bounding, er, "boxes". Seems like something that
could potentially be added to SVG.

~~~
sambeau
If you look at the Alice demo, linked, it shows that it can also be used to
creatively shape text layouts and animate them over time.

[https://www.youtube.com/watch?v=VON2shFlsKU](https://www.youtube.com/watch?v=VON2shFlsKU)

