Original Source: http://feedproxy.google.com/~r/tympanus/~3/Rltpd29cdPk/

Inspirational Website of the Week: K72 Agency

A super sharp design with great typography and vibrant details. Our pick this week.

Get inspired

CSS for Web Vitals

Learn about CSS-related techniques for optimizing Web Vitals in this article by Katie Hempenius and Una Kravets.

Read it

CSS Layout Generator

A great CSS Grid & Flexbox generator for creating layout components.

Check it out

Beginner JavaScript Notes

A massive resource and guide to JavaScript.

Check it out

The perfect link

There’s more to a link than just a clickable word or image. So, how do you create the perfect link? Rian Rietveld takes you on an informative journey.

Read it

Create a Liquid Hover Effect with GSAP & SVG

Learn how to add a vector-based, fluid hover effect to any simple SVG path. By George Francis.

Check it out

Spark Freebie

A great freebie by BONT that contains 3 hero designs with different art directions. Made for Figma.

Check it out

How To Fix Cumulative Layout Shift (CLS) Issues

Barry Pollard looks at ways to tackle issues regarding the Cumulative Layout Shift metric.

Read it

The Art of Design Spec’ing

Learn about design specs, how to create them, and how they smooth out the hand-off process between design and engineering. By Mahdi Farra.

Read it

Boring Avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

Check it out

vanilla-extract

Zero-runtime stylesheets-in-TypeScript: Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

Check it out

Readsom

Readsom hosts newsletters that are handpicked and filtered through topics to help you find your niche of interest. Explore and discover your next favorite newsletter.

Check it out

Front-End Testing is For Everyone

Evgeny Klimenchenko covers the most popular and widely used types of front-end tests and explains why testing is for everyone.

Read it

yare.io

A real-time strategy game where you control your units by writing JavaScript code.

Check it out

Responsive design and container queries? Oh my!

Ethan Marcotte shares his excitement about container queries.

Read it

Khroma

Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.

Check it out

CSS morphing

Supercool CSS only text morphing by Amit Sheen. If you like this effect, you might also find this demo interesting.

Check it out

50 Tips to Improve User Interface

A great collection of useful UI design tips by Victor Ponamariov.

Check it out

DOOM Captcha

Finally a Captcha that respects your privacy and that is everything but boring!

Check it out

How to create fancy jumping text input labels

Mikael Ainalem explains how to create a slick input with an animating placeholder.

Read it

Follow the Grain

Jay Freestone argues that we should spend less time trying to fix things, and more time trying to understand them.

Read it

macOCR

macOCR is a command line app that enables you to turn any text on your screen into text on your clipboard.

Check it out

From Our Blog
FBO Particles with Three.js

Learn how to code the particle cloud seen on the website of Visualdata using Three.js.

Check it out

From Our Blog
Trigonometry in CSS and JavaScript: Introduction to Trigonometry

In this series of articles we’ll get an overview of trigonometry, understand how it can be useful, and delve into some creative applications in CSS and JavaScript.

Check it out

From Our Blog
Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions

In the second part of this series on trigonometry, we’ll explore JavaScript trigonometric functions and learn how we can apply them to our CSS code.

Check it out

The post Collective #664 appeared first on Codrops.

Original Source: http://feedproxy.google.com/~r/tympanus/~3/vR1zyMHn0Ck/

In the previous article we looked at how to clip an equilateral triangle with trigonometry, but what about some even more interesting geometric shapes?

This article is the 3rd part in a series on Trigonometry in CSS and JavaScript:

Introduction to TrigonometryGetting Creative with Trigonometric FunctionsBeyond Triangles (this article)

Plotting regular polygons

A regular polygon is a polygon with all equal sides and all equal angles. An equilateral triangle is one, so too is a pentagon, hexagon, decagon, and any number of others that meet the criteria. We can use trigonometry to plot the points of a regular polygon by visualizing each set of coordinates as points of a triangle.

Polar coordinates

If we visualize a circle on an x/y axis, draw a line from the center to any point on the outer edge, then connect that point to the horizontal axis, we get a triangle.

If we repeatedly rotated the line at equal intervals six times around the circle, we could plot the points of a hexagon.

But how do we get the x and y coordinates for each point? These are known as cartesian coordinates, whereas polar coordinates tell us the distance and angle from a particular point. Essentially, the radius of the circle and the angle of the line. Drawing a line from the center to the edge gives us a triangle where hypotenuse is equal to the circle’s radius.

We can get the angle in degrees by diving 360 by the number of vertices our polygon has, or in radians by diving 2pi radians. For a hexagon with a radius of 100, the polar coordinates of the uppermost point of the triangle in the diagram would be written (100, 1.0472rad) (r, θ).

An infinite number of points would enable us to plot a circle.

Polar to cartesian coordinates

We need to plot the points of our polygon as cartesian coordinates – their position on the x and y axis.

As we know the radius and the angle, we need to calculate the adjacent side length for the x position, and the opposite side length for the y position.

Therefore we need Cosine for the former and Sine for the latter:

adjacent = cos(angle) * hypotenuse
opposite = sin(angle) * hypotenuse

We can write a JS function that returns an array of coordinates:

const plotPoints = (radius, numberOfPoints) => {

/* step used to place each point at equal distances */
const angleStep = (Math.PI * 2) / numberOfPoints

const points = []

for (let i = 1; i <= numberOfPoints; i++) {
/* x & y coordinates of the current point */
const x = Math.cos(i * angleStep) * radius
const y = Math.sin(i * angleStep) * radius

/* push the point to the points array */
points.push({ x, y })
}

return points
}

We could then convert each array item into a string with the x and y coordinates in pixels, then use the join() method to join them into a string for use in a clip path:

const polygonCoordinates = plotPoints(100, 6).map(({ x, y }) => {
return `${x}px ${y}px`
}).join(‘,’)

shape.style.clipPath = `polygon(${polygonCoordinates})`

See the Pen Clip-path polygon by Michelle Barker (@michellebarker) on CodePen.dark

This clips a polygon, but you’ll notice we can only see one quarter of it. The clip path is positioned in the top left corner, with the center of the polygon in the corner. This is because at some points, calculating the cartesian coordinates from the polar coordinates is going to result in negative values. The area we’re clipping is outside of the element’s bounding box.

To position the clip path centrally, we need to add half of the width and height respectively to our calculations:

const xPosition = shape.clientWidth / 2
const yPosition = shape.clientHeight / 2

const x = xPosition + Math.cos(i * angleStep) * radius
const y = yPosition + Math.sin(i * angleStep) * radius

Let’s modify our function:

const plotPoints = (radius, numberOfPoints) => {
const xPosition = shape.clientWidth / 2
const yPosition = shape.clientHeight / 2
const angleStep = (Math.PI * 2) / numberOfPoints
const points = []

for (let i = 1; i <= numberOfPoints; i++) {
const x = xPosition + Math.cos(i * angleStep) * radius
const y = yPosition + Math.sin(i * angleStep) * radius

points.push({ x, y })
}

return points
}

Our clip path is now positioned in the center.

See the Pen Clip-path polygon by Michelle Barker (@michellebarker) on CodePen.dark

Star polygons

The types of polygons we’ve plotted so far are known as convex polygons. We can also plot star polygons by modifying our code in the plotPoints() function ever so slightly. For every other point, we could change the radius value to be 50% of the original value:

/* Set every other point’s radius to be 50% */
const radiusAtPoint = i % 2 === 0 ? radius * 0.5 : radius

/* x & y coordinates of the current point */
const x = xPosition + Math.cos(i * angleStep) * radiusAtPoint
const y = yPosition + Math.sin(i * angleStep) * radiusAtPoint

See the Pen Clip-path star polygon by Michelle Barker (@michellebarker) on CodePen.dark

Here’s an interactive example. Try adjusting the values for the number of points and the inner radius to see the different shapes that can be made.

See the Pen Clip-path adjustable polygon by Michelle Barker (@michellebarker) on CodePen.dark

Drawing with the Canvas API

So far we’ve plotted values to use in CSS, but trigonometry has plenty of applications beyond that. For instance, we can plot points in exactly the same way to draw on a <canvas> with Javascript. In this function, we’re using the same function as before (plotPoints()) to create an array of polygon points, then we draw a line from one point to the next:

const canvas = document.getElementById(‘canvas’)
const ctx = canvas.getContext(‘2d’)

const draw = () => {
/* Create the array of points */
const points = plotPoints()

/* Move to starting position and plot the path */
ctx.beginPath()
ctx.moveTo(points[0].x, points[0].y)

points.forEach(({ x, y }) => {
ctx.lineTo(x, y)
})

ctx.closePath()

/* Draw the line */
ctx.stroke()
}

See the Pen Canvas polygon (simple) by Michelle Barker (@michellebarker) on CodePen.dark

Spirals

We don’t even have to stick with polygons. With some small tweaks to our code, we can even create spiral patterns. We need to change two things here: First of all, a spiral requires multiple rotations around the point, not just one. To get the angle for each step, we can multiply pi by 10 (for example), instead of two, and divide that by the number of points. That will result in five rotations of the spiral (as 10pi divided by two is five).

const angleStep = (Math.PI * 10) / numberOfPoints

Secondly, instead of an equal radius for every point, we’ll need to increase this with every step. We can multiply it by a number of our choosing to determine how far apart the lines of our spiral are rendered:

const multiplier = 2
const radius = i * multiplier
const x = xPosition + Math.cos(i * angleStep) * radius
const y = yPosition + Math.sin(i * angleStep) * radius

Putting it all together, our adjusted function to plot the points is as follows:

const plotPoints = (numberOfPoints) => {
const angleStep = (Math.PI * 10) / numberOfPoints
const xPosition = canvas.width / 2
const yPosition = canvas.height / 2

const points = []

for (let i = 1; i <= numberOfPoints; i++) {
const radius = i * 2 // multiply the radius to get the spiral
const x = xPosition + Math.cos(i * angleStep) * radius
const y = yPosition + Math.sin(i * angleStep) * radius

points.push({ x, y })
}

return points
}

See the Pen Canvas spiral – simple by Michelle Barker (@michellebarker) on CodePen.dark

At the moment the lines of our spiral are at equal distance from each other, but we could increase the radius exponentially to get a more pleasing spiral. By using the Math.pow() function, we can increase the radius by a larger number for each iteration. By the golden ratio, for example:

const radius = Math.pow(i, 1.618)
const x = xPosition + Math.cos(i * angleStep) * radius
const y = yPosition + Math.sin(i * angleStep) * radius

See the Pen Canvas spiral by Michelle Barker (@michellebarker) on CodePen.dark

Animation

We could also rotate the spiral, using (using requestAnimationFrame). We’ll set a rotation variable to 0, then on every frame increment or decrement it by a small amount. In this case I’m decrementing the rotation, to rotate the spiral anti-clockwise

let rotation = 0

const draw = () => {
const { width, height } = canvas

/* Create points */
const points = plotPoints(400, rotation)

/* Clear canvas and redraw */
ctx.clearRect(0, 0, width, height)
ctx.fillStyle = ‘#ffffff’
ctx.fillRect(0, 0, width, height)

/* Move to beginning position */
ctx.beginPath()
ctx.moveTo(points[0].x, points[0].y)

/* Plot lines */
points.forEach((point, i) => {
ctx.lineTo(point.x, point.y)
})

/* Draw the stroke */
ctx.strokeStyle = ‘#000000’
ctx.stroke()

/* Decrement the rotation */
rotation -= 0.01

window.requestAnimationFrame(draw)
}

draw()

We’ll also need to modify our plotPoints() function to take the rotation value as an argument. We’ll use this to increment the x and y position of each point on every frame:

const x = xPosition + Math.cos(i * angleStep + rotation) * radius
const y = yPosition + Math.sin(i * angleStep + rotation) * radius

This is how our plotPoints() function looks now:

const plotPoints = (numberOfPoints, rotation) => {
/* 6 rotations of the spiral divided by number of points */
const angleStep = (Math.PI * 12) / numberOfPoints

/* Center the spiral */
const xPosition = canvas.width / 2
const yPosition = canvas.height / 2

const points = []

for (let i = 1; i <= numberOfPoints; i++) {
const r = Math.pow(i, 1.3)
const x = xPosition + Math.cos(i * angleStep + rotation) * r
const y = yPosition + Math.sin(i * angleStep + rotation) * r

points.push({ x, y, r })
}

return points
}

See the Pen Canvas spiral by Michelle Barker (@michellebarker) on CodePen.dark

Wrapping up

I hope this series of articles has given you a few ideas for how to get creative with trigonometry and code. I’ll leave you with one more creative example to delve into, using the spiral method detailed above. Instead of plotting points from an array, I’m drawing circles at a new position on each iteration (using requestAnimationFrame).

See the Pen Canvas spiral IIII by Michelle Barker (@michellebarker) on CodePen.dark

Special thanks to George Francis and Liam Egan, whose wonderful creative work inspired me to delve deeper into this topic!

The post Trigonometry in CSS and JavaScript: Beyond Triangles appeared first on Codrops.

Original Source: https://www.hongkiat.com/blog/fixing-common-video-file-errors-with-repairit/

It is such a frustrating feeling when you open a video file and it turns out to be corrupted or shows some error. There can be any number of reasons why your video file encounters an error but only a…

Visit hongkiat.com for full content.

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/kQHM05qMZh4/passiflora-films-branding-and-visual-identity

Passiflora Films Branding and Visual Identity

abduzeedo06.02.21

Michał Markiewicz shared a branding and visual identity project for Passiflora Films, a creative production company based out of Warsaw, with over 10 years of production experience in the Polish and Worldwide markets. The scope of my work encompasses comprehensive rebranding including logo, key visual and printed materials.

The Passiflora Films symbol was developed as a result of simplification of the letters ‘P’ and ‘F’. The letters are reflected in basic figures such as the triangle and the circle. 
The whole sign simultaneously discreetly refers to the shape of the camera.
Elements of the symbol have been used in the patterns and are more widely used across the whole visual identity system. Patterns also fulfill the function of a modular grid, in which elements such as a logo, logotype or promotional slogans are placed in various arrangements. 
The logotype was made with a Helvetica Neue typeface, in order not to produce any additional, undesirable associations with the name. 

The company’s recognition and character are to be built through the entire system, the sum of the elements; logo, complementary marks, colors and layout.

For more information make sure to check out

Dribbble​​​​​​​
Instagram 
Website 
 

Stationery photos by Axela Frank. Also visit  passiflora-films.co

Original Source: https://smashingmagazine.com/2021/05/desktop-wallpaper-calendars-june-2021/

There’s an artist in everyone. Some bring their creative ideas to life with digital tools, others capture the perfect moment with a camera, or love to grab pen and paper to create little doodles or pieces of lettering. And even if you think you’re far away from being an artist, well, it might just be hidden somewhere deep inside of you. So why not explore it?

Since more than ten years, our monthly wallpapers series is the perfect opportunity to do just that: to challenge your creative skills and break out of your daily routine to do something just for fun, fully immersing yourself in the creative process.

For this post, folks from across the globe once again took on the challenge and designed beautiful and unique wallpapers to cater for some good vibes on your screens. All of them come in versions with and without a calendar for June 2021 and can be downloaded for free. At the end of this post, we also compiled some wallpaper goodies from our archives that are just too good to be forgotten. A big thank-you to everyone who shared their designs with us — this post wouldn’t exist without you. Happy June!

You can click on every image to see a larger preview,
We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit a wallpaper!

Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent! Join in! →

Mother Nature

“Rain, fog, and winter jackets have been our companions for the last couple of weeks, but we are challenging the gloomy weather with this colorful, vibrant, picturesque calendar design. Spring is the most wonderful time of the year, intense, powerful, and vivid. We hope to summon sunny June with our desktop wallpaper – join us!” — Designed by PopArt Studio from Novi Sad, Serbia.

preview
with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Reef Days

“June brings the start of summer full of bright colors, happy memories, and traveling. What better way to portray the goodness of summer than through an ocean folk art themed wallpaper. This statement wallpaper gives me feelings of summer and I hope to share that same feeling with others.” — Designed by Taylor Davidson from Kentucky.

preview
with calendar: 480×800, 1024×1024, 1242×2208, 1280×1024
without calendar: 480×800, 1024×1024, 1242×2208, 1280×1024

Happy Father’s Day

“Whatever you call them, Pa, Dad, Daddy, Pops, they all have one thing in common: they are our superheroes. So, to honor superhero fathers this Father’s Day, we created this super calendar for you to enjoy.” — Designed by Ever Increasing Circles from the United Kingdom.

preview
with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Bikini Season

“June reminds me of growing up on the lake. For me, this month is the official start of bikini season! I wanted to create this wallpaper to get everyone excited to put on their favorite suit and find their favorite body of water.” — Designed by Katie Ulrich from the United States.

preview
with calendar: 640×480, 1024×1024, 1680×1200, 1920×1200, 2560×1440
without calendar: 640×480, 1024×1024, 1680×1200, 1920×1200, 2560×1440

Summer Party

Designed by Ricardo Gimenes from Sweden.

preview
with calendar: 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 3840×2160
without calendar: 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 3840×2160

Happy Squatch

“I just wanted to capture the atmosphere of late spring/early summer in a fun, quirky way that may be reflective of an adventurous person during this time of year.” — Designed by Nick Arcarese from the United States.

preview
with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Dancing In The Summer Moonlight

“If you’re happy and you know it – show some dance moves – because summer is finally here!” — Designed by ActiveCollab from the United States.

preview
with calendar: 1080×1920, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440
without calendar: 1080×1920, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Love Yourz

“J Cole is one of the most inspiring hip hop artists and is known for his famous song ‘Love Yourz’. With all of the negativity and hate we have been having the past year, this is a message to remind people to love your life (love yourz) because there is no such thing as a life that is better than yours.” — Designed by James from Pennsylvania.

preview
with calendar: 640×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×800, 1280×1024, 1366×768, 1400×1050, 1440×900, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1400
without calendar: 640×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×800, 1280×1024, 1366×768, 1400×1050, 1440×900, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1400

Made For Greatness

“Inspiring to more than mediocrity.” — Designed by Katherine Bollinger from the United States.

preview
with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Summertime

Designed by Ricardo Gimenes from Sweden.

preview
with calendar: 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 3840×2160
without calendar: 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 3840×2160

This Is How You Start The Day

“When I think of June, I think of what summer items make you happy. For the 21+ club, summer means grabbing a drink with your friends on a hot summer day. The preferred drink of the summer is bottomless mimosas! And what better time to start drinking than the beginning of the day (responsibly of course)!” — Designed by Carolyn Choates from the United States.

preview
with calendar: 640×480, 800×480, 800×600, 1024×1024, 1280×800, 1280×960, 1280×1024, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1440
without calendar: 640×480, 800×480, 800×600, 1024×1024, 1280×800, 1280×960, 1280×1024, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1440

Under The Starlight

“After being cooped up inside for so long, everyone needs a little nature break! And what’s more calming than a crackling campfire on a cool midsummer night, looking up at the shining stars and full moon!” — Designed by Hannah Basham from the United States.

preview
with calendar: 800×600, 1280×720, 1400×1050, 1600×1200, 1920×1080, 2560×1440
without calendar: 800×600, 1280×720, 1400×1050, 1600×1200, 1920×1080, 2560×1440

Oldies But Goodies

Ready for more? Below you’ll find a little best-of from past June wallpapers editions. Enjoy! (Please note that these designs don’t come with a calendar.)

Summer Coziness

“I’ve waited for this summer more than I waited for any other summer since I was a kid. I dream of watermelon, strawberries, and lots of colors.” — Designed by Kate Jameson from the United States.

preview
without calendar: 320×480, 1024×1024, 1280×720, 1680×1200, 1920×1080, 2560×1440

Wildlife Revival

“In these turbulent times for men, we are witnessing the extraordinary rebirth of nature, especially of the wildlife around the planet. Maybe this situation is a blessing in disguise? Either way, one thing is for sure, this planet is the home that we share with all other forms of life and it is our obligation and sacred duty to protect it.” — Designed by LibraFire from Serbia.

preview
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Summer Is Coming

“Imagine a sunny beach and an endless blue sea. Imagine yourself right there. Is it somewhere in Greece? The Mediterranean? North Africa? Now turn around and start wandering through those picturesque, narrow streets. See all those authentic white houses with blue doors and blue windows? Feel the fragrance of fresh flowers? Stop for a second. Take a deep breath. Seize the moment. Breathe in. Breathe out. Now slowly open your eyes. Not quite there yet? Don’t worry. You will be soon! Summer is coming…” — Designed by PopArt Studio from Serbia.

preview
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Solstice Sunset

“June 21 marks the longest day of the year for the Northern Hemisphere — and sunsets like these will be getting earlier and earlier after that!” — Designed by James Mitchell from the United Kingdom.

preview
without calendar: 1280×720, 1280×800, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440, 2880×1800

Ice Creams Away!

“Summer is taking off with some magical ice cream hot air balloons.” — Designed by Sasha Endoh from Canada.

preview
without calendar: 320×480, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Deep Dive

“Summer rains, sunny days and a whole month to enjoy. Dive deep inside your passions and let them guide you.” — Designed by Ana Masnikosa from Belgrade, Serbia.

preview
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

The Call Of Koel

“The peak of summer is upon us, and June brings scorching heat to most places in India. Summer season in my state also reminds me of the bird songs, especially the Koel bird. A black bird with a red eye, this bird’s elegant voice rings through the trees on hot summer afternoons. This June, I have created a wallpaper to give life to this experience — the birds singing in scorching heat give us some respite!” — Designed by Anuja from India.

preview
without calendar: 640×480, 1024×768, 1280×960, 1366×768, 1440×900, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Oh, The Places You Will Go!

“In celebration of high school and college graduates ready to make their way in the world!” — Designed by Bri Loesch from the United States.

preview
without calendar: 320×480, 1024×768, 1280×1024, 1440×900, 1680×1050, 1680×1200, 1920×1440, 2560×1440

Bauhaus

“I created a screenprint of one of the most famous buildings from the Bauhaus architect Mies van der Rohe for you. So, enjoy the Barcelona Pavillon for your June wallpaper.” — Designed by Anne Korfmacher from Germany.

preview
without calendar: 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Join The Wave

“The month of warmth and nice weather is finally here. We found inspiration in the World Oceans Day which occurs on June 8th and celebrates the wave of change worldwide. Join the wave and dive in!” — Designed by PopArt Studio from Serbia.

preview
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Flamingood Vibes Only

“I love flamingos! They give me a happy feeling that I want to share with the world.” — Designed by Melissa Bogemans from Belgium.

preview
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1200, 1920×1440, 2560×1440

Shine Your Light

“Shine your light, Before the fight, Just like the sun, Cause we don’t have to run.” — Designed by Anh Nguyet Tran from Vietnam.

preview
without calendar: 768×1280, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Summer Surf

“Summer vibes.” — Designed by Antun Hirsman from Croatia.

preview
without calendar: 640×480, 1152×864, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1440, 2650×1440

Ice Cream June

“For me, June always marks the beginning of summer! The best way to celebrate summer is of course ice cream, what else?” — Designed by Tatiana Anagnostaki from Greece.

previewwithout calendar: 1024×768, 1280×1024, 1440×900, 1680×1050, 1680×1200, 1920×1440, 2560×1440

Lavender Is In The Air!

“June always reminds me of lavender — it just smells wonderful and fresh. For this wallpaper I wanted to create a simple, yet functional design that featured — you guessed it — lavender!” — Designed by Jon Phillips from Canada.

preview
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Strawberry Fields

Designed by Nathalie Ouederni from France.

preview
without calendar: 320×480, 1024×768, 1280×1024, 1440×900, 1680×1200, 1920×1200, 2560×1440

Start Your Day

Designed by Elise Vanoorbeek from Belgium.

preview
without calendar: 1024×768, 1280×720, 1280×800, 1280×960, 1280×1024, 1440×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1220, 1920×1440, 2560×1440

Pineapple Summer Pop

“I love creating fun and feminine illustrations and designs. I was inspired by juicy tropical pineapples to celebrate the start of summer.” — Designed by Brooke Glaser from Honolulu, Hawaii.

<img loading=”lazy” decoding=”async” src=”https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16db22ee-c7f8-47a3-856c-992c82cd61f9/june-16-pineapple-summer-pop-preview-opt.png” alt=”Pineapple Summer Pop”

preview
without calendar: 640×480, 800×600, 1024×768, 1152×720, 1280×720, 1280×800, 1280×960, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Nine Lives!

“I grew up with cats around (and drawing them all the time). They are so funny… one moment they are being funny, the next they are reserved. If you have place in your life for a pet, adopt one today!” — Designed by Karen Frolo from the United States.

preview
without calendar: 1024×768, 1024×1024, 1280×800, 1280×960, 1280×1024, 1366×768, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440