I was inspired by this TikTok video showing how to build a cool Lego look in Figma and decided to turn it into a generator made with Svelte.
So how to build one? Let’s cut to the chase.
I chose to write my code in Svelte’s awesome REPL editor. Start by having this base layout for your REPL file:
First of all, we need to define styles for single brick. If you watched the reference video, you can see how one would style single brick in Figma. Converting this to CSS is rather simple. What we need to do is:
- Define some variables for easier style management
- Create brick style
- Create inner round brick style
- Create image output container styles
Here is variable definitions I went with:
Let’s break the variables down. Backdrop blur and background color is directly copied from the reference video. The brick size is not defined here — it will be defined later with JavaScript. However, think that brick size is 50x50 px for now. This is what we use in calc functions.
In the reference video inner brick size is 30 pixels, this is 60 % of 50px. So that’s how we get inner brick size.
Shadow size was set to 4px in the video. So we can calculate multiplier using brick size divided with 50px base size. Then we can use this multiplier to calculate actual shadow size. So if we set our brick size to 60px, shadows are 4px * 1.2 (120 % shadow size) since 60px brick size divided with 50px base size is 1.2.
Alright, now that we got ourselves confused with maths lets move on and apply our variables into use:
This should be pretty self-explanatory. We just load our variables for the brick itself and inner rounded brick. Display grid with place-content center just centers the inner round brick.
Now we need to style the image output container styles. The image will be loaded as background-image so we have some styles for that. The display property we have as flex so our bricks lay out nicely in the container.
Alright. Now that we have some styles to begin with, let’s write some JavaScript. Instead of splitting JavaScript down I’ll just paste the whole script tag here and explain it below.
So from top to bottom, this is what the script does.
First we import onMount so we can call a function when Svelte is mounted. Then we define few variables:
- 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.
And finally we call set_brick_size. Now we can move over to write our HTML.
Here is the HTML as a whole. I’ll again explain it from top to bottom below.
First we have a form with preventDefault set on submit. This is to avoid page reload if ENTER is pressed by accident while adding image URL. We bind image URL input to url variable we created so that whenever the input changes the background image is updated in real-time.
Then we have a checkbox that is tied to can_render variable. Whenever checkbox value changes we update can_render attribute. Instead of directly binding can_render variable we use this method since direct binding would return can_render as string “true” or “false” which we don’t want.
Next we define our output container with some inline styling based on our JavaScript variables.
If render is allowed, we will simply loop over an array that has as many items as loop_count variable is. That will render required amount of bricks for our image.
And that’s how a Lego brick effect generator is built.
You can find the final implementation in Svelte REPL here. Be mindful that it’s not performance optimized; have can_render disabled by default and if/when you mess around with any of the configuration options. If you make a typo and have million of bricks generated your browser WILL freeze 😆
