Building Lego brick effect generator with Svelte

Lego brick effect
  • Define some variables for easier style management
  • Create brick style
  • Create inner round brick style
  • Create image output container styles
  • url for pointing to image of choice
  • can_render that tells our application if it can render the bricks or not
  • brick_size in pixels, I figured that 20px is actually the best so that it’s not too “bricky”
  • loop_count to be populated later when we calculate required loop count (how many bricks we render)
  • image_width and image_height for the output (size in pixels). Since we are going to add image as background-image we can easily scale the image to fit into our output container using CSS we defined earlier.
  • set_brick_size function that sets brick-size CSS variable and populates loop_count variable based on single brick size and image dimensions.

--

--

--

I build complex things on the web and share my findings to help others learn too.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Change Angular CLI ng serve Default Host and Port

Important things of Node.js to know — Part 2

How to Fix JavaScript Runtime issues — Lazy Loading

What’s new in ES2021?

Deploy React JS application on AWS Cloud Front (CDN )

Thinking in components with Vue.js

Function as Parameters in Golang

A small trick to write clean reducers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mika S.

Mika S.

I build complex things on the web and share my findings to help others learn too.

More from Medium

With the uptrend of tools like Storybook & Component Isolation that help test & scale UI, we…

Production-ready React js charts in Figma

Design with React js charts in Figma with Anima.

Retool Self-Hosted Alternatives

One API call to insert in multiple tables Supabase