The Code Pen Spark Flowers, Fancy Headers, and Flexagons graphic Spark Header link View this issue on Code Pen heading level 1 Flowers, Fancy Headers, and Flexagons Creativity is flourishing this week, just like spring flowers. Steve Gardner literally has flowers involving a frame generated from SVG on the fly. But creativity doesn't have to be complex! In fact, some of the most clever experiments have stunning visual results with quite little code. We see just that with Gabriel Cyrillo's Moiré Effect that you really should click over to see animate. Hey! It's April! We're kicking off a brand new month of link number Code Pen Challenge with the theme Retro Video Games. Thanks to link the Hello Sign API , our sponsor for the challenges this month. link graphic number Code Pen Challenge: You've Got Mail Roundup link number Code Pen Challenge: You've Got Mail Roundup The Code Pen community filled our inboxes with great work this week during the You've Got Mail challenge. Here are just a few of our favorite Pens from this week! link graphic Geometric business card with CSS Grid link Geometric business card with CSS Grid From design inspiration elsewhere on the internet, Liz re creates it with modern technologies like CSS grid, flexbox, clip path, and radial gradient backgrounds. Recreating the business card template as found here: https: slash slash novadonna dot me slash product slash business card template designs pop geometric slash link graphic Pic Lab link Pic Lab Drag and drop (or select) and image and it becomes editable through nicely custom range sliders. Change things like hue and brightness. Astonishingly, all those image filters are a single line of CSS, using CSS variables that are passed in via Java Script watching those range sliders. link graphic Draggable House link Draggable House Drag the roof of the house up to expand the building! link graphic Level Up at Treehouse link Level Up at Treehouse Treehouse has courses to help you learn and advance your tech career. Learn things like front end web development, i OS and Android development, and even game programming. link graphic Video Music link Video Music Jake Albaugh's Pen creates music through repeated chord arpeggios, but which chord plays is based on the colors your webcam sees. link graphic Kelvin Hung link Kelvin Hung One of the easiest ways to customize your Code Pen profile is to drop in the URL of a Pen to use as the header background. We ran across Kelvin Hung's lovely example this week and went around poking for a few more! link graphic Sphere Slices link Sphere Slices Shaw recreates a GIF from the Angular Geometry blog using THREE dot js and GSAP. link graphic Moiré Effect link Moiré Effect You might be surprised to find how little code this optical illusion too to create. As Gabriel Cyrillo says, 25 lines of CSS and voilá! link graphic Super powered layouts with CSS Variables plus CSS Grid link Super powered layouts with CSS Variables plus CSS Grid Michelle Barker writes: We’ve been using CSS Grid in production at Mud for a few months now and I absolutely love the flexibility it’s giving me when coding layout. For so long we've got along without a true layout... link graphic ohyeah dot exe (P 5JS heart suit j Query) link ohyeah dot exe (P 5JS heart suit j Query) James Hancock creates layers of tables of circles and animates them through p 5 dot js link graphic Flower Frame link Flower Frame Go watch a photo be enveloped in a generative SVG flower frame from Steve Gardner. Click again to see a new frame get generated with new random colors. link graphic 3D Hex Mosaic link 3D Hex Mosaic Ivan Juarez N. s full page tiling of hexagons over a photograph (generated with THREE dot js) tilts satisfyingly as you mouse around the page. Each individusal tile also comes to life with color. heading level 2 link The Code Pen Job Board Front end web design and development jobs list with 16 items link Senior Front End Engineer at MJD Interactive link Front End Developer (React and Javascript) at In Vision AG link Java Script Developer at Sparkbox link 2018 Frontend Design Apprentice at Sparkbox link Front End Developer at Exciting Sports Startup at League Apps link Design and UX Position at Code Pen link Sr. Front End Engineer at Toast link Web Developer at Hambly Freeman link Front End slash Web slash UI slash UX Developer at Bluegg link Lead Developer (Word Press, Frontend) at North Street Creative, Inc. link Front End Engineer at Call Em All link Front End Developer at Bonfire Studios link Senior Front End Engineer at Wurl link UI Engineer at Dixon and Moe link Lead Mobile Developer at EF Education First link Front End Developer at RIFF out of list link Browse All Jobs link Post a Job handshake Hey! We recently totally revamped link Collab Mode under the hood to make it way faster and more accurate. If you haven't played with it in a while, we think you'll feel the difference for the better. man teacher medium-light skin tone That same realtime power is now available for link Professor Mode too. radio If you're curious about the tech behind it, we talked about it specifically on link Code Pen Radio dot heading level 2 link Meetups! Like minded less code greater people getting together list with 6 items link Hull, United Kingdom on April 9 link Houston, Texas on April 19 link Chicago, Illinois on April 23 link St Petersburg, Florida on April 25 link San Salvador, El Salvador on April 28 link Tournai, Belgium on May 3 out of list link Browse All Meetups link Host Your Own! heading level 2 link Sponsor the Spark Just one way to reach developers and support Code Pen This email, the Code Pen Spark, goes out to hundreds of thousands of fellow web designers and developers. People that enjoy creativity and want to stay on top of the industry and what's possible in web browsers. You can link sponsor the Code Pen Spark to share your product or service to reach those people and help support Code Pen at the same time. You can adjust your link email preferences any time. Or, link instantly opt out of all community emails. Need help with anything? Hit up link support dot