Create SVG Blobs

Create nice blobs and stuff them in your design in Hype.
Just generate a blob. Take the SVG and paste it into an innerHTML (pen tool on rectangle).

If you want to program such shapes, there is also a JS generator (just the form).

PS: You can do them too with the vector tool :wink:

4 Likes

For a minute there I thought you were talking about blobs and started scratching my head..

1 Like

This page takes it a step further… awesome patterns and shapes for your Hype designs.

I'd love to program little "apps" like this for Hype. Little WebKit modals I could hook up to different locations in Hype (like the dropdown for rectangles backgrounds and return my asset to be used as background image). Just looking at filters in SVG alone… the possibilities are endless.

Creating Fancy Borders (Border-Radius) with Hype Data Decorator

data-fancy-border.hype.zip (116,8 KB)

The decorator is super simple:

// fancy border decorator	
HypeDataDecorator.observeBySelector('[data-fancy-border]', function(hypeDocument, element, event){
	element.style.borderRadius = element.dataset.fancyBorder;
}, {attributeFilter: ['data-fancy-border']});

Download:
data-fancy-border.hype.zip (116,9 KB)

Generators with GUI:
Simple: https://9elements.github.io/fancy-border-radius/
Full: https://9elements.github.io/fancy-border-radius/full-control.html

Just copy and paste the values over. One could also do a version mapping each percentage to a different attribute but as setting attributes in preview requires code anyway I didn't bother. You can animate them by defining a CSS animation or transition and just setting them in preview as they are reactive. You could also just use pure CSS and CSS vars in this case but I wanted a solution that doesn't require declaring a class per element … :wink:

2 Likes