Collective #360

Original Source:


Our Sponsor
What Are Your Users Actually Thinking?

User feedback is key to creating awesome experiences. Learn how to build an effective user testing plan and get actionable insights fast.

Get the Guide


Stop Designing For Only 85% Of Users: Nailing Accessibility In Design

A great article on how to create more accessible UIs with lots of tips and helpful resources.

Read it



A Chrome extension that you can use to modify any website in real-time and share it with others.

Check it out


Light Modal

A modal without any JavaScript, powered by CSS.

Check it out



Fantastic WebGL demo by xoihazard.

Check it out


SEO for Vue.js SPA: Prerendering & Server-Side Rendering

Snipcart’s developer Max shows you how to handle SEO with a Vue.js SPA.

Watch it


SVG Polygon Generator

A very handy SVG polygon generator by Varun Vachhar.

Check it out


Want to know how Deep Learning works? Here’s a quick guide for everyone

Radu Raicea’s easy introduction to Deep Learning.

Read it


ES2015+ Cheatsheet

A useful overview of new JavaScript features in ES2015, ES2016, ES2017 and beyond.

Check it out


SVG waves with feDisplacementMap

Learn how to make SVG waves and ripples with feDisplacementMap in this article by Gabi.

Read it


Can You Afford It? Real-world Web Performance Budgets

A very interesting article on performance budgets for web projects.

Read it



A super simple starting point for Hugo websites.

Check it out


Free Font: AO Mono

An edgy free monospace typeface by Atelier Olschinsky.

Get it


Success with CSS

Jo Franchetti writes about ways to keep CSS maintainable and scalable.

Read it


The New CSS Layout, An Excerpt

An excerpt from Chapter 3 of Rachel Andrew’s new book, The New CSS Layout.

Check it out


FontBase: Google Fonts

FontBase now allows to easily activate Google Fonts and use them as if they were local.

Check it out


Mozilla brings Microsoft, Google, the W3C, Samsung together to create cross-browser documentation on MDN

Last Collective we mentioned Microsoft’s engagement with Mozilla; read more about Mozilla’s plan to grow collaboration with Microsoft, Google, and other industry leaders on MDN Web Docs.

Read it


Isometric CSS Grid experiment in three planes

Andy Barefoot explores 3D grids in this great demo.

Check it out


Sea Debris Concept

Beautiful parallax demo by Adam Kuhn.

Check it out


Riot Search Engine

A distributed and very efficient open source search engine.

Check it out


Speech Recognition Is Not Solved

Read why we still don’t have human-level speech recognition in this article by Awni Hannun.

Read it


Fire aftermath

Robin Kraft made this open imagery of the October 2017 Sonoma-Napa fires available on

Check it out



A dead simple way to share a file between your phone and your computer.

Check it out


How We Started Sharing Components as a Team

Jonathan Saring writes about why his team decided to build Bit, a way to share and sync source code components between different SCM repositories and projects.

Read it

Collective #360 was written by Pedro Botelho and published on Codrops.

Building Your Business Platform with Simbla

Original Source:

Most website builders will help you create a basic website. But what if you need more? If your goal is to build a customized platform that serves the needs of your business – then you’ll want to know more about the Simbla Website Builder.

Simbla enables you to create your own responsive website via their simple drag-and-drop UI. Powerful functionality such as a blog or ecommerce can be quickly added through their App Market. What’s more, their Online Database feature will both power your website and allow you to create advanced web applications.

Let’s have a look under the hood and see how this platform can change your business for the better:

Simbla Helps You Build Fully-Responsive Websites

Fully-Responsive Websites

Simbla gives you plenty of choice when it comes to building your website. You can choose from their massive selection of responsive website templates that can be customized to your liking. Or, you can build something completely unique with their user-friendly Website Wizard.

Either way, you can be confident that your site will look great on any device. Plus, you won’t have to worry about dealing with code. Simbla does all the heavy lifting in the background – building your site using rock-solid Bootstrap 3 and HTML5.

They also understand that using high-quality imagery is a key ingredient for online success. So they’ve provided users with access to their library of photos. That means you won’t have to waste time scouring the web for just the right photo – it’s all available in one convenient place.

Powerful Data-Driven Applications Made Easy with Simbla

Powerful Data-Driven Applications Made Easy

Simbla’s platform for building websites with ease has also been applied to their Online Database and Web Application builder. You’ll be able to build a database and easily implement data into your website via readymade widgets. And, because it’s all based on the powerful Parse server, custom web applications can be developed via JavaScript. Together, it results in a tremendously flexible means to customize a data-driven website.

Web Widgets
Web Widgets are what connect your website to your online database. They allow you to add high-level functionality with drag-and-drop simplicity. Features such as search, data tables, forms, image galleries and charts will enhance UX and can be styled in a variety of ways.

User Roles and Permissions
Simbla takes advantage of Parse server’s permissions model. Each user role has its own set of permissions. You can use it to set up membership-based websites – or just restrict specific areas. Combine it with the Registration and Login/Logout Web Widgets to easily allow members access to your content.

Extensible via JavaScript
Your Online Database can be accessed via JavaScript to create custom web applications. Users will be able to interact with your data in a lightning-fast environment. For example, you might build an application to enable custom filtering of a database query. This provides users with the data they’re seeking in a user-friendly way.

The Simbla App Market Provides Essential Business Functionality

The App Market Provides Essential Business Functionality

There are certain features that every website needs in order to be successful. That’s where Simbla’s App Market really shines. It connects to your Online Database and enables you to implement top-notch functionality into your site. The best part is that you can conveniently manage everything in one place.

Blogs are a great way to share information with visitors to your site. Simbla’s Blog app is easy to set up and manage, great for SEO and has the flexibility you need. Changing the design and structure of your blog is a piece of cake.

If you’re looking for a unique way to display headlines, you’ll want to check out the News app. It places your headlines in an attention-grabbing news ticker format.

Selling online just got a whole lot easier. Simbla’s ecommerce app will display your products in a clean and organized manner. A simplified checkout process will help to minimize cart abandonment. Meanwhile, you’ll be able to manage and track it all through the back end. You’ll have the information you need to make smart business decisions.

Plus, you can take advantage of the Product Catalog app to share detailed information with customers. Add images, technical specifications and more to help customers learn about your products.

Lead Manager
Simbla’s Lead Manager app enables you to keep track of all leads generated through your website. All it takes to get started is adding a widget to your site. You’ll be able to add custom fields to get the exact types of information you’re looking for. From there, you can to track lead sources, manage their status and check progress. The app also allows for an internal chat, so you can check in with team members.

More Essential Apps are Coming Soon
Simbla is continually crafting new tools to help your business succeed online. Currently in development are CRM, Email Marketing, Knowledge Base, Online Scheduling and Site Analytics apps. The goal is to provide you with powerful business applications in one easy-to-use interface.

Start with Simbla for Free

Start with Simbla for Free

Running a website often means managing accounts with several outside services. Applications that handle crucial functions such as ecommerce, analytics and lead management may each be provided by a different vendor. Simbla, on the other hand, brings it all together under one roof – using a single database. Your data is no longer spread out across the web.

Plus, the platform enables you to create custom applications that are tailored to your specific needs. Combine that with the ability to easily create a beautiful responsive website and it’s easy to see why Simbla is ahead of the pack.

Get started with Simbla for free and take advantage of a complete platform for your business.

Collective #359

Original Source:


Inspirational Website of the Week: Reflet

An elegant design with some experimental user interaction. Our pick this week.

Get inspired


This content is sponsored via Syndicate Ads
FullStory: See, Search, and Understand Your User Experience

Actions speak louder than interviews. High-fidelity session playback shows how real users experience your site. Searchable, shareable, flawless on dynamic apps.

Try FullStory free


Documenting the Web together

Microsoft has started its amazing collaboration with Mozilla by contributing and redirecting to the MDN Web Docs.

Read it


Unsplash Awards 2017

The Unsplash Awards was created to recognize the powerful impact Unsplash contributors have made through their generosity and artistry. Check out 13 photography categories that feature their work.

Check it out



A dependency-free static site generator written in Rust.

Check it out


A Look Back at the History of CSS

A great read by Jason Hoffman on the fascinating evolution of CSS.

Read it


Free Font: Geometric

A unique font designed by Monika Gause.

Get it


How to solve a maze using shaders

A video tutorial by Shadron that shows how to solve any maze in the form of a picture, using a GLSL shader.

Watch it


The Story of CSS Grid, from Its Creators

Read what the people who have contributed to the development of CSS Grid say about this important milestone in CSS history.

Read it


Front-End Checklist

The Front-End Checklist is a list of all the important bits to have and test before launching a webpage.

Check it out



DevDocs combines multiple API documentations in a fast, organized, and searchable interface.

Check it out



Some demos that show different web font loading strategies.

Check it out


The most essential list of resources for Front-End beginners

A multi-lingual list of great resources for starting out with web development.

Check it out


CSS Grids for Everyone

Some great Laracast episodes on mastering CSS Grid.

Check it out


Meet Horovod: Uber’s Open Source Distributed Deep Learning Framework for TensorFlow

Read about Horovod, an open source component which makes it easier to start—and speed up—distributed deep learning projects with TensorFlow.

Read it



Moodily allows designers to gather and collaborate on design inspiration.

Check it out


But what *is* a Neural Network?

Great two part video series on how Neural Networks work.

Watch it


Improving Performance with the Paint Timing API

If you missed it: Umar Hansa explains the Paint Timing API.

Read it


Only CSS: Not Conflict Panel

A great demo by Yusuke Nakaya of rotating 3D panels.

Check it out


Pixabay Developer API

The Pixabay API gives you free access to over a million photos, illustrations, vector graphics and videos.

Check it out


Combining Graphical And Voice Interfaces For A Better User Experience

A great read on multi-modal interfaces by David Pasztor.

Read it


Free Font: Ozymandias

A beautiful blackletter font by Sebastian Fermin.

Get it


Design Systems

Susan Robertson’s summary of some of the interesting ideas in Alla Kholmatova’s book, Design Systems.

Read it



Writing is a lightweight, distraction-free text editor in the browser with Markdown and LaTeX support.

Check it out


From Our Blog
Dynamic Shape Overlays with SVG

Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.

Check it out

Collective #359 was written by Pedro Botelho and published on Codrops.

The Perfect Office – ZTE Axon M, Microsoft Surface Book, Office Ideas and More

Original Source:

The Perfect Office – ZTE Axon M, Microsoft Surface Book, Office Ideas and More

The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More

Oct 24, 2017

We’ve seen some great gadgets and equipment for designers. There are so many cool stuff out there that we could assemble infinite perfect office spaces every week! So we’ll assemble some, and we’d like you to help us. What equipment would the perfect office have?

This week we begin with the Alexa-powered speakers Ultimate Ears, which feature battery life from 12 to 16 hours. There’s also the ZTE Axon M which features not only one display, but two, for you to extend your use of this fantastic smartphone. You’ll also find the latest Microsoft Surface Book 2, which is pretty dope. But there’s more!

Ultimate Ears Speakers

The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More!

if you’re looking for more Alexa-powered speakers, you’ll be interested to learn that Ultimate Ears has announced two new portable Bluetooth speakers that feature Alexa integration. This comes in the form of the Ultimate Ears BLAST and MEGABLAST speakers which are actually not the first Ultimate Ears speakers to feature Alexa support. In terms of features, both speakers appear to be more or less similar as they will both feature WiFi connectivity and will allow users to take calls on the speaker. They are also waterproof up to depths of 3 feet for up to 30 minutes, and will feature 12 hours of battery life for the BLAST and 16 hours for the MEGABLAST. (at Ubergizmo)

EvoDesk Adjustable Desk

The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More!

Treat your body right even during long work days with the EvoDesk Electronic Height Adjustable Desk. Complete with a sleek look, this intelligent desk moves as you need throughout the day. Located on the side are controls to give you instant height adjustment. In fact, it has a maximum height of 50 inches to meet your height requirements. Offering you the finest materials, you also have your choice of three surface sizes. If you can’t stick to one size, you’re in luck. The EvoDesk has an expandable frame. This means that you can swap out different surface sizes as and when you need. It totally evolves with you and your needs. Incredibly, using the built-in controls, the desk moves at a rate of 1.5 inches per second. It takes just moments to change up your posture. (at The Gadget Flow)

ZTE Axon M

The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More!

Amidst all the grumbling about lack of innovation in the smartphone space, ZTE is trying something genuinely novel with the Axon M. It’s 5.2-inch, 1080p display wouldn’t be much to brag about if it didn’t have a twin on the back. A hinge lets you place them side-by-side, giving you a 6.75-inch display. You can extend the home screen and apps to fill both screens, run two apps side-by-side, and even mirror the content, letting you set the phone up, tent-style, for two-person viewing. A Snapdragon processor, fingerprint sensor, and 20-megapixel camera round out the specs. (at Uncrate)

Microsoft Surface Book 2

The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More!

It’s not the lightest laptop on the market — the 15-inch model weighs over four pounds — but it is among the fastest. Packing 8th-generation Intel dual- and quad-core processors and Nvidia GeForce graphics, the Microsoft Surface Book 2 has the computing power to crunch through any job (or game) with ease. It retains the detachable display of its predecessor, letting it convert from laptop to tablet instantly, and its 17 hours of maximum battery life ensure it’ll run all day without needing a charge. (at Uncrate)

Platonics Arc 3D Printer

The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More!

3D printers have clear benefits when creating architectural models, but none of the options on the market have been built with that in mind. Until now. The Platonics Arc 3D Printer is the first to be designed specifically for architects. Created using feedback from practicing professionals, it uses a self-cleaning, self-calibrating design to eliminate time-wasting setup and maintenance processes. Using specialized software that links to most popular architectural apps, you can move from a CAD file to printable STL in just four steps, freeing up more time to focus on what’s important: your design. (at Uncrate)

Office Ideas!

Here are some office ideas for you! How do you like these? Don’t forget that you may suggest gadgets or ideas via twitter: @paulogabriel – Also, if you’d like to sponsor this post, drop me a line! I hope you enjoy these! Cheers. 😉

The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More! The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More! The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More! The Perfect Office - ZTE Axon M, Microsoft Surface Book, Office Ideas and More!

perfect office
office ideas
home office

Interaction Design: Learn some basics of Sign Language with Uber

Original Source:

Interaction Design: Learn some basics of Sign Language with Uber

Interaction Design: Learn some basics of Sign Language with Uber

Oct 24, 2017

To me, it’s an interesting take on building your brand and at the same time listening to your community on what can be done to improve the overall experience. Let’s take Uber for example who recently built what they called a series of features in the effort of the Deaf or Hard of Hearing community. It’s a beautiful step in the right direction. We are taking a look at the interaction design of their new microsite where you can learn the basics of American sign language. You’ll learn how to sign: Thank you, Goodbye and even sign your name. The microsite is rightful simple to navigate and love the intention of expressing a mobile experience.

In their Words

Unemployment or underemployment in the Deaf or Hard of Hearing community is close to 70%. At Uber, we’re proud to provide earning opportunities to Deaf and Hard of Hearing drivers across the world and in more than 200 US cities. That’s why in 2015 we built a suite of features including flashing trip request notifications, text-only communication, and notifications so riders knew they were being matched with a Deaf or Hard of Hearing driver.

Interaction Design: Learn some basics of Sign Language with UberUber Sign Language

Today, we’re excited to introduce a tool that helps teach riders simple phrases in American Sign Language, including how to sign their name, hello, thank you, and goodbye. We hope this tool will help start a conversation between our riders and our Deaf and Hard of Hearing partners.

More Links
Learn more about Uber Sign Language
ABDZ in Sign Language
Interaction Design: Learn some basics of Sign Language with UberInteraction Design: Learn some basics of Sign Language with UberInteraction Design: Learn some basics of Sign Language with UberInteraction Design: Learn some basics of Sign Language with UberInteraction Design: Learn some basics of Sign Language with Uber


interaction design

Why Adobe Photoshop the perfect tool to design a website layout?

Original Source:

As a web developer, you have to work with a variety of tools for creating the most awesome designs for your clients. Similarly, we also have to use different tools for conceptualizing, making wireframes, content creation and code generation for a perfect workflow in web design and development.   No matter how much-advanced tools we […]

The post Why Adobe Photoshop the perfect tool to design a website layout? appeared first on

How to Use Adobe XD’s Smart Guides

Original Source:

The following is a short extract from our book, Jump Start Adobe XD, written by Daniel Schwarz, a highly practical tutorial on this fantastic prototyping tool. SitePoint Premium members get access with their membership, or you can buy a copy in stores worldwide.

Smart Guides were originally introduced in Sketch and later adopted in Photoshop after the feature became a hit. Adobe XD explains them in their help section: “When you move an object or artboard, use Smart Guides to align the selected object or artboard to other objects or artboards. The alignment is based on the geometry of objects and artboards. Guides appear as the object approaches the edge or center point of other objects."

Let me start by saying than an object is a common term used to describe a shape layer, text layer, group or bitmap on the canvas. Basically, any type of layer or group is an object.

Guides are visual cues that illustrate how objects align to one another — they can display the distance between two layers, or indicate whether or not a layer has snapped to the bounds of another object or artboard edge. Adobe XD will try to anticipate where you want to move a layer, and automatically snap to that location when you draw close to it, while showing how far you have left until you reach it. You can work out the distance manually by selecting the first layer, holding Option/Alt, and hovering over the second layer.

Manual Alignments

Let's start by aligning a layer manually, so we understand the difference. A moment ago we grouped two text layers together — select both of them once more (hold Shift while you click them) and click the Align Center (Horizontally) button in the Inspector, or use the shortcut: Cmd + Control + C (Shift + C in Windows).

Smart Guides When Moving Layers

Now select the actual group. You can either use the Select tool (keyboard shortcut: V) and select the group by clicking on it, or use the Esc key to traverse up to the parent container, which is the group. Move it until two things happen:

It appears 28px below the form
It snaps to the dead-center of the artboard horizontally

You’ll know you’ve done this correctly because the colored lines of the smart guides will illustrate what the object has snapped to (which will be the dead-center of the artboard, as indicated by the vertical line that appears). You'll also notice the relative distance between the search function group and the welcome text group (as indicated by the numerical value).

Smart Guides With Option/Alt-Hold

Select the bottom-most layer of this group, hold Option (Alt in Windows), then hover the cursor over the top-most layer. This is a manual approach (also known as Option/Alt-hold) to measuring the relative distance between two layers. You can move layers as normal while option-holding, so use the ↑→↓← arrow keys until the distance is 5px.

Let's use what we've learned to add some more elements. So far we’ve taken our first look at shape layers, text layers, grouping of layers, alignments, smart guides, and some other basics. Let's recap some of that and finish off this screen, starting with a bottom navigation component with four links.

Continue reading %How to Use Adobe XD’s Smart Guides%

How to Achieve Your Own Definition of Success as a Freelance Web Designer

Original Source:

In society, success is often portrayed as having pretty close to a singular definition. We think of a successful entrepreneur driving a Tesla and living in the smartest of smart homes. Or we see the opulence of a big shot executive “living the life”, as they say.

But success is a very personal and subjective thing. There is no right or wrong definition because it’s a matter of what is in our hearts. My measure of success may be different than yours. But does that mean we should still take the same approach to achievement?

While traits like hard work and integrity will always be shared factors, how we approach our freelance design businesses should better reflect our personal definition of success. Here are some ways to tailor your business to help you get to your happy place.

Focus on the Right Types of Projects

For some people, part of what defines success involves working on specific kinds of projects. Fulfillment may come in the form of designing websites for non-profit organizations or a favorite sport. Others may not care about industry so much as they care about luring projects that pay big money.

The point is to figure out the types of projects that will get you to where you want to go. From there, it’s a matter of marketing yourself to whatever niche that interests you.

Of course, this is much easier said than done. The realities of running your own business sometimes mean having to take on projects that aren’t necessarily aligned with your vision of success. But that’s okay – so long as you don’t get stuck with something that interferes with your long-term goals.

Indeed, unless you already have industry connections, pointing your business towards a specific type of project is often a process that takes time. But once you get your foot in the door, it can open up all sorts of possibilities.

Think About Where, When and How Much You Work

Success can be greatly influenced by your work environment. When you think about it, this is an area that both affects and defines our success. If you’re cranking out websites from a place you don’t want to be, it’s going to be that much more difficult to do well.

But it also goes well beyond just location. There are a number of scenarios where part of our success is not only where we do our work, but also the time we spending working. Consider three of the most common ones:

Being a Parent and a Designer
Freelancing provides a great opportunity for parents to both make a living and be there for their children. Personally, it allows me to get my daughter to and from school, along with the chance to spend extra quality time with her. So for me, working standard daylight hours at home is the right situation. Weekends are generally off-limits unless absolutely necessary.

This can be a fairly simple arrangement in terms of initial business setup. The biggest challenge is that there are interruptions in the day that can be a bit chaotic. But being at home certainly makes any chaos easier to handle than it would be at a traditional office.

Putting the ‘Free’ in Freelancer
There are many designers who use their freelance career as a vehicle to pursue other passions like travel or volunteering. Therefore, the flexibility to work your own hours is a big deal. It’s also a bit more of a challenge to achieve.

Working odd hours really depends on the type of clientele you have. Some gigs demand that you to be available during “normal” business hours. And being in the office less than the standard 5 days a week can also take some careful planning.

Still, it can be done. It’s all about finding an equation that a) lets you work a personalized schedule; and b) enables you to make a living. If you’re really passionate about something, you’ll find a way to make it all work.

Hitting the Big Time
Those looking for big ticket projects may take a different tact to freelancing than the two scenarios above. For one, higher level projects might mean working with big companies. While some clients may be comfortable with remote meetings, others may prefer to meet you in person. This means either traveling or having a meeting space may be necessary.

The other major consideration here is the amount of extra work involved. Even if you’re managing other freelancers, there could be plenty of nights and weekends filled with work (not to mention the time spent marketing yourself).

If this sounds like your jam, then focusing on process efficiency can do wonders for keeping everything running smoothly. Establish a process for how projects get done on-time and on-budget so that you can keep that money machine cha-chinging.

When Progress is Slow…

One of the best aspects of being a freelancer is the ability to do things your own way. That’s a big responsibility, though. It’s easy to get into bad habits that end up hurting your chances to live and work the way you want.

So, if you’re not seeing the progress you hoped for, it may be time to take a hard look at how you’re running your business. While bad luck can play a role, most often you’ll find that are specific things you could be doing differently.

When it comes to your financial situation, scrutinize how much you charge and how you collect payment. Web design, in particular, is an industry where prices run the gamut. You want to make sure that you’re not charging too much or too little.

As for collection, ask yourself if you’ve made it easy enough for people to both receive invoices and make payments. For example, I noticed that not long after I started accepting online payments, I had a significantly lower number of clients who were late with payment. While online payment processors usually charge a fee for every transaction, I found that this was a worthy tradeoff over being stressed out by unpaid invoices.

It’s also vital to review the services you offer. Are you providing services that don’t fit in with your goals? Do your services set you up for a predictable stream of income? While it may be hard to fully weed out services that aren’t in your best interest, you can always grandfather them out over time. Or, you might structure pricing in such a way that it’s much more worthwhile.

Lastly, review just how organized (or not) you are. If you find that you’re always scrambling to put out fires, you might want to invest some effort into better organizing your average workday. There are plenty of tools and services out there to help. If something makes your life easier and doesn’t require you to sacrifice quality – go for it.

Creating Success on Your Own Terms

Being a freelancer puts you in a unique position to determine your own present and future. It enables you to achieve the kind of success that reflects who you are as a person.

But getting there requires a thoughtful approach. Simply working day-to-day without regards to your goals isn’t enough (I now know that from experience). The key is to find out what it is you want and then implement any necessary changes in order to make it a reality.

It may take some time to get there, but that journey is part of the fun.

Which Design Elements Are The Must-Have For Mobile App?

Original Source:

According to a Gartner research, “The global app downloads worldwide will reach the mark of 268.7 billion in 2017.” The astronomical usage of the mobile app is an eye-opening fact. When the businesses are consumer-first, then the need of mobile app has turned from an option to a necessity. Witnessing the benefits and use of […]

The post Which Design Elements Are The Must-Have For Mobile App? appeared first on

Dynamic Shape Overlays with SVG

Original Source:

Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controlling the individual coordinates of the several layers of SVG paths, the curved shapes animate to a rectangle (the overlay) with a gooey motion. We use some nice easing functions from glsl-easings and by tuning the curve, speed and the delay value, we can generate many interesting effects.


Attention: We use some new CSS properties in the demos; please view them with a modern browsers.

This demo is kindly sponsored by HelloSign API: The dev friendly eSign.

Building the SVG

Let’s have a look at the SVG which we will use to insert the path coordinates dynamically.
First, we’ll make sure that the whole SVG and the overlay paths are stretched to the size of the screen. For that, we’ll set the preserveAspectRatio attribute to none. Depending on how many layers we want, we’ll create that amount of paths:

<svg class=”shape-overlays” viewBox=”0 0 100 100″ preserveAspectRatio=”none”>
<path class=”shape-overlays__path”></path>
<path class=”shape-overlays__path”></path>
<path class=”shape-overlays__path”></path>

The styles that will allow the SVG to match the size of the browser window looks as follows:

.shape-overlays {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;

Each path element corresponds to a layer of the overlay. We’ll specify the fill for each of these layers in our CSS. The last path element is the background that stays after the overlay expansion:

.shape-overlays path:nth-of-type(1) { fill: #c4dbea; }
.shape-overlays path:nth-of-type(2) { fill: #4c688b; }
.shape-overlays path:nth-of-type(3) { fill: #2e496a; }

Note that in our demos, we make use of CSS custom properties to set the path colors.

The JavaScript

For our demos, we define an overlay control class that allows us to set and control a couple of things. By changing each value, you can create unique looking shapes and effects:

class ShapeOverlays {
constructor(elm) {
this.elm = elm; // Parent SVG element.
this.path = elm.querySelectorAll(‘path’); // Path elements in parent SVG. These are the layers of the overlay.
this.numPoints = 18; // Number of control points for Bezier Curve.
this.duration = 600; // Animation duration of one path element.
this.delayPointsArray = []; // Array of control points for Bezier Curve.
this.delayPointsMax = 300; // Max of delay value in all control points.
this.delayPerPath = 60; // Delay value per path.
this.timeStart =;
this.isOpened = false;

const elmOverlay = document.querySelector(‘.shape-overlays’);
const overlay = new ShapeOverlays(elmOverlay);

Further methods that determine the appearance of the overlay are the ShapeOverlays.toggle() method and the ShapeOverlays.updatePath() method.

The ShapeOverlays.toggle() method has the function of opening and closing the overlay, and also of setting the delay value of each control point for every time it opens and closes. It is not necessary to set the delay value every time, but by altering it, it will create some nice randomness.

The ShapeOverlays.updatePath() controls the animation by specifying the easing function.

For example, in demo 1, the same easing function is used for all control points, and the delay value is set like a fine wave using trigonometric functions, so that we get a “melting” appearance.

toggle() {
const range = 4 * Math.random() + 6;
for (var i = 0; i < this.numPoints; i++) {
const radian = i / (this.numPoints – 1) * Math.PI;
this.delayPointsArray[i] = (Math.sin(-radian) + Math.sin(-radian * range) + 2) / 4 * this.delayPointsMax;


updatePath(time) {
const points = [];
for (var i = 0; i < this.numPoints; i++) {
points[i] = ease.cubicInOut(Math.min(Math.max(time – this.delayPointsArray[i], 0) / this.duration, 1)) * 100


In our demos we use this effect to create an overlay in order to show a menu in the end of the animation. But it could also be used for other types of transitions, like page transitions or scroll effects. Your imagination is the limit.

Here are a couple of screenshots:





We hope you enjoyed this effect and find it useful!


glsl-easings by glslify. Easing functions that use to demos are based on the code of glsl-easings module.

Dynamic Shape Overlays with SVG was written by Yoichi Kobayashi and published on Codrops.