Posted on Jul 18 In 1969, German artist Max Ernst created a beautiful painting in celebration of the Moon-landing:Entitled Naissance d'une Galaxie (Birth of a Galaxy), I can imagine it must've taken months to complete, using stencils for all the dots. Luckily, we can code it much faster!First, we need a background-layer with a radial background:We need some "fluffy clouds" to simulate the painted layers, so we'll use the "fluffy" filter from my CSS Filter Editor:We add an ::after-pseudo-element to the same layer as the radial background, inheriting that same background, but also using the "fluffy"-filter:And now we have:Before we continue with the dots, let's add an SVG-element in the markup — we'll add the innerHTML later:To hardcode the dots would probably take as long time as the original painting, so let's use JavaScript and some Math to help us out!To start with, we need a function, dots(), with a configuration-object:Explainer:Next, we need arrays of coordinates for each ring. For that, we need a small helper-method:If you inspect the original painting, you'll notice that most of the dots have the same, light-yellow color. A few, random dots are light blue or lavender. To help us fill-in random dots with these values, we need a random-method:... and a fill()-method, where we parse-in the current Dot-index as number:To render the dots, we need two loops: One for the rings. For each ring, we output a -element, to roup all the dots within a ring.One for the dots within a single ring. In this inner loop, we calculate the x and y position of each dot from the coordinates we created using coords(). After that, we simply output a for each entry.Let's add that output to the SVG-element, we created earlier:... and voilà:Could this be done in CSS instead of SVG?. Yes, using sin() and cos() in CSS, this is definitely possible. I just find it easier to work with SVG and it's viewBox when working with such large "datasets" as this.Let's combine the dots with the radial, fluffy-clouds-background:And we're done! ... but what about the lower part of the painting — below the Moon? I tried using the drops-filter (from the CSS Filter Editor above) and a bunch of overlaying gradients, but simply couldn't get the right "look and feel". Let's turn the painting into a poster, and add some texts.We'll use cqi-units for the texts, so they scale nicely to the width of our poster:Posters look better in frames, so let's add a nice wooden frame! CSS has a border-style called ridge which does the job — so with:— we get: Finally, it's time to hang our framed poster on a wall. Let's add a wallpaper from CSS Patterns to the -element — and a box-shadow to the -element:Beautiful, isn't it? Hope your CPU could manage the 10241 dots!Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Cruip - Jun 20 Cruip - Jun 20 Paul Asjes - Jul 14 Ismael Ramos 🚀 - Jul 12 Once suspended, madsstoumann will not be able to comment or publish posts until their suspension is removed. Once unsuspended, madsstoumann will be able to comment and publish posts again. Once unpublished, all posts by madsstoumann will become hidden and only accessible to themselves. If madsstoumann is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Mads Stoumann. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag madsstoumann: madsstoumann consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging madsstoumann will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.