Filmmaker Matt Lincoln, also known as Filmattic, made a splash last year with his viral “Lockdown Loops,” a collection of seamlessly looping VFX animations he posted to Instagram and TikTok, several of which feature our 3D asset kits.More

Brunnian links are a type of nontrivial link – or knot – where multiple linked loops become unlinked if a single loop is cut or removed. Beyond ‘fun’ disentanglement toys …read more

In April 2025, at the ITER Private Sector Fusion Workshop in Cadarache, something remarkable unfolded. In a room filled with scientists, engineers and software visionaries, the line between big science and commercial innovation began to blur.   Three organisations – Microsoft Research, Arena and Brigantium Engineering – shared how artificial intelligence (AI), already transforming everything from language models to logistics, is now stepping into a new role: helping humanity to unlock the power of nuclear fusion.  Each presenter addressed a different part of the puzzle, but the message was the same: AI isn’t just a buzzword anymore. It’s becoming a real tool – practical, powerful and indispensable – for big science and engineering projects, including fusion.  “If we think of the agricultural revolution and the industrial revolution, the AI revolution is next – and it’s coming at a pace which is unprecedented,” said Kenji Takeda, director of research incubations at Microsoft Research.  Microsoft’s collaboration with ITER is already in motion. Just a month before the workshop, the two teams signed a Memorandum of Understanding (MoU) to explore how AI can accelerate research and development. This follows ITER’s initial use of Microsoft technology to empower their teams. A chatbot in Azure OpenAI service was developed to help staff navigate technical knowledge, on more than a million ITER documents, using natural conversation. GitHub Copilot assists with coding, while AI helps to resolve IT support tickets – those everyday but essential tasks that keep the lights on.  But Microsoft’s vision goes deeper. Fusion demands materials that can survive extreme conditions – heat, radiation, pressure – and that’s where AI shows a different kind of potential. MatterGen, a Microsoft Research generative AI model for materials, designs entirely new materials based on specific properties. “It’s like ChatGPT,” said Takeda, “but instead of ‘Write me a poem’, we ask it to design a material that can survive as the first wall of a fusion reactor.”  The next step? MatterSim – a simulation tool that predicts how these imagined materials will behave in the real world. By combining generation and simulation, Microsoft hopes to uncover materials that don’t yet exist in any catalogue.  While Microsoft tackles the atomic scale, Arena is focused on a different challenge: speeding up hardware development. As general manager Michael Frei put it: “Software innovation happens in seconds. In hardware, that loop can take months – or years.”  Arena’s answer is Atlas, a multimodal AI platform that acts as an extra set of hands – and eyes – for engineers. It can read data sheets, interpret lab results, analyse circuit diagrams and even interact with lab equipment through software interfaces. “Instead of adjusting an oscilloscope manually,” said Frei, “you can just say, ‘Verify the I2C [inter integrated circuit] protocol’, and Atlas gets it done.”  It doesn’t stop there. Atlas can write and adapt firmware on the fly, responding to real-time conditions. That means tighter feedback loops, faster prototyping and fewer late nights in the lab. Arena aims to make building hardware feel a little more like writing software – fluid, fast and assisted by smart tools.  Fusion, of course, isn’t just about atoms and code – it’s also about construction. Gigantic, one-of-a-kind machines don’t build themselves. That’s where Brigantium Engineering comes in. Founder Lynton Sutton explained how his team uses “4D planning” – a marriage of 3D CAD models and detailed construction schedules – to visualise how everything comes together over time. “Gantt charts are hard to interpret. 3D models are static. Our job is to bring those together,” he said.  The result is a time-lapse-style animation that shows the construction process step by step. It’s proven invaluable for safety reviews and stakeholder meetings. Rather than poring over spreadsheets, teams can simply watch the plan come to life.  And there’s more. Brigantium is bringing these models into virtual reality using Unreal Engine – the same one behind many video games. One recent model recreated ITER’s tokamak pit using drone footage and photogrammetry. The experience is fully interactive and can even run in a web browser. “We’ve really improved the quality of the visualisation,” said Sutton. “It’s a lot smoother; the textures look a lot better. Eventually, we’ll have this running through a web browser, so anybody on the team can just click on a web link to navigate this 4D model.”  Looking forward, Sutton believes AI could help automate the painstaking work of syncing schedules with 3D models. One day, these simulations could reach all the way down to individual bolts and fasteners – not just with impressive visuals, but with critical tools for preventing delays.  Despite the different approaches, one theme ran through all three presentations: AI isn’t just a tool for office productivity. It’s becoming a partner in creativity, problem-solving and even scientific discovery.  Takeda mentioned that Microsoft is experimenting with “world models” inspired by how video games simulate physics. These models learn about the physical world by watching pixels in the form of videos of real phenomena such as plasma behaviour. “Our thesis is that if you showed this AI videos of plasma, it might learn the physics of plasmas,” he said.  It sounds futuristic, but the logic holds. The more AI can learn from the world, the more it can help us understand it – and perhaps even master it. At its heart, the message from the workshop was simple: AI isn’t here to replace the scientist, the engineer or the planner; it’s here to help, and to make their work faster, more flexible and maybe a little more fun. As Takeda put it: “Those are just a few examples of how AI is starting to be used at ITER. And it’s just the start of that journey.”  If these early steps are any indication, that journey won’t just be faster – it might also be more inspired. 

Development and Testing  Rate this post Sorting is a basic task in programming. It arranges data in order. There are many sorting algorithms. Selection Sort is one of the simplest sorting methods. It is easy to understand and code. But it is not the fastest. In this guide, we will explain the Selection Sort Time Complexity. We will cover best, worst, and average cases. What Is Selection Sort? Selection Sort works by selecting the smallest element from the list. It places it in the correct position. It repeats this process for all elements. One by one, it moves the smallest values to the front. Let’s see an example: Input: [5, 3, 8, 2]Step 1: Smallest is 2 → swap with 5 → [2, 3, 8, 5]Step 2: Smallest in remaining is 3 → already correctStep 3: Smallest in remaining is 5 → swap with 8 → [2, 3, 5, 8] Now the list is sorted.How Selection Sort Works Selection Sort uses two loops. The outer loop moves one index at a time. The inner loop finds the smallest element. After each pass, the smallest value is moved to the front. The position is fixed. Selection Sort does not care if the list is sorted or not. It always does the same steps. Selection Sort Algorithm Here is the basic algorithm: Start from the first element Find the smallest in the rest of the list Swap it with the current element Repeat for each element This repeats until all elements are sorted. Selection Sort Code (Java Example) javaCopyEditpublic class SelectionSort { public static void sort(int[] arr) { int n = arr.length; for (int i = 0; i < n - 1; i++) { int min = i; for (int j = i + 1; j < n; j++) { if (arr[j] < arr[min]) { min = j; } } int temp = arr[min]; arr[min] = arr[i]; arr[i] = temp; } } } This code uses two loops. The outer loop runs n-1 times. The inner loop finds the minimum. Selection Sort Time Complexity Now let’s understand the main topic. Let’s analyze Selection Sort Time Complexity in three cases. 1. Best Case Even if the array is already sorted, Selection Sort checks all elements. It keeps comparing and swapping. Time Complexity: O(n²) Reason: Inner loop runs fully, regardless of the order Example Input: [1, 2, 3, 4, 5] Even here, every comparison still happens. Only fewer swaps occur, but comparisons remain the same. 2. Worst Case This happens when the array is in reverse order. But Selection Sort does not optimize for this. Time Complexity: O(n²) Reason: Still needs full comparisons Example Input: [5, 4, 3, 2, 1] Even in reverse, the steps are the same. It compares and finds the smallest element every time. 3. Average Case This is when elements are randomly placed. It is the most common scenario in real-world problems. Time Complexity: O(n²) Reason: Still compares each element in the inner loop Example Input: [3, 1, 4, 2, 5] Selection Sort does not change behavior based on input order. So the complexity remains the same. Why Is It Always O(n²)? Selection Sort compares all pairs of elements. The number of comparisons does not change. Total comparisons = n × (n – 1) / 2 That’s why the time complexity is always O(n²).It does not reduce steps in any case. It does not take advantage of sorted elements. Space Complexity Selection Sort does not need extra space. It sorts in place. Space Complexity: O(1) Only a few variables are used No extra arrays or memory needed This is one good point of the Selection Sort. Comparison with Other Algorithms Let’s compare Selection Sort with other basic sorts: AlgorithmBest CaseAverage CaseWorst CaseSpaceSelection SortO(n²)O(n²)O(n²)O(1)Bubble SortO(n)O(n²)O(n²)O(1)Insertion SortO(n)O(n²)O(n²)O(1)Merge SortO(n log n)O(n log n)O(n log n)O(n)Quick SortO(n log n)O(n log n)O(n²)O(log n) As you see, Selection Sort is slower than Merge Sort and Quick Sort. Advantages of Selection Sort Very simple and easy to understand Works well with small datasets Needs very little memory Good for learning purposes Disadvantages of Selection Sort Slow on large datasets Always takes the same time, even if sorted Not efficient for real-world use When to Use Selection Sort Use Selection Sort when: You are working with a very small dataset You want to teach or learn sorting logic You want stable, low-memory sorting Avoid it for: Large datasets Performance-sensitive programs Conclusion Selection Sort Time Complexity is simple to understand. But it is not efficient for big problems. It always takes O(n²) time, no matter the case. That is the same for best, worst, and average inputs. Still, it is useful in some cases. It’s great for learning sorting basics. It uses very little memory. If you’re working with small arrays, Selection Sort is fine. For large data, use better algorithms. Understanding its time complexity helps you choose the right algorithm. Always pick the tool that fits your task. Tech World TimesTech World Times (TWT), a global collective focusing on the latest tech news and trends in blockchain, Fintech, Development & Testing, AI and Startups. If you are looking for the guest post then contact at techworldtimes@gmail.com

Doors (2022) Christian Marclay Institute of Contemporary Art Boston Through September 1, 2025Brooklyn Museum Through April 12, 2026On the screen, a movie clip plays of a character entering through a door to leave out another. It cuts to another clip of someone else doing the same thing over and over, all sourced from a panoply of Western cinema. The audience, sitting for an unknown amount of time, watches this shape-shifting protagonist from different cultural periods come and go, as the film endlessly loops. So goes Christian Marclay’s latest single-channel film, Doors (2022), currently exhibited for the first time in the United States at the Institute of Contemporary Art Boston. (It also premieres June 13 at the Brooklyn Museum and will run through April 12, 2026). Assembled over ten years, the film is a dizzying feat, a carefully crafted montage of film clips revolving around the simple premise of someone entering through a door and then leaving out a door. In the exhibition, Marclay writes, “Doors are fascinating objects, rich with symbolism.” Here, he shows hundreds of them, examining through film how the simple act of moving through a threshold multiplied endlessly creates a profoundly new reading of what said threshold signifies. On paper, this may sound like an extremely jarring experience. But Marclay—a visual artist, composer, and DJ whose previous works such as The Clock (2010) involved similar mega-montages of disparate film clips—has a sensitive touch. The sequences feel incredibly smooth, the montage carefully constructed to mimic continuity as closely as possible. This is even more impressive when one imagines the constraints that a door’s movement offers; it must open and close a certain direction, with particular types of hinges or means of swinging. It makes the seamlessness of the film all the more fascinating to dissect. When a tiny wooden doorframe cuts to a large double steel door, my brain had no issue at all registering a sense of continued motion through the frame—a form of cinematic magic. Christian Marclay, Doors (still), 2022. Single-channel video projection (color and black-and-white; 55:00 minutes on continuous loop). Watching the clips, there seemed to be no discernible meta narrative—simply movement through doors. Nevertheless, Marclay is a master of controlling tone. Though the relentlessness of watching the loops does create an overall feeling of tension that the film is clearly playing on, there are often moments of levity that interrupt, giving visitors a chance to breathe. The pacing too, swings from a person rushing in and out, to a slow stroll between doors in a corridor. It leaves one musing on just how ubiquitous this simple action is, and how mutable these simple acts of pulling a door and stepping inside can be. Sometimes mundane, sometimes thrilling, sometimes in anticipation, sometimes in search—Doors invites us to reflect on our own interaction with these objects, and with the very act of stepping through a doorframe. Much of the experience rests on the soundscape and music, which is equally—if not more heavily—important in creating the transition across clips. Marclay’s previous work leaned heavily on his interest in aural media; this added dimension only enriches Doors and elevates it beyond a formal visual study of clips that match each other. The film bleeds music from one scene to another, sometimes prematurely, to make believable the movement of one character across multiple movies. This overlap of sounds is essentially an echo of the space we left behind and are entering into. We as the audience almost believe—even if just for a second—that the transition is real. The effect is powerful and calls to mind several references. No doubt Doors owes some degree of inspiration to the lineage of surrealist art, perhaps in the work of Magritte or Duchamp. For those steeped in architecture, one may think of Bernard Tschumi’s Manhattan Transcripts, where his transcriptions of events, spaces, and movements similarly both shatter and call to attention simple spatial sequences. One may also be reminded of the work of Situationist International, particularly the psychogeography of Guy Debord. I confess that my first thought was the (in my view) equally famous door-chase scene in Monsters, Inc. But regardless of what corollaries one may conjure, Doors has a wholly unique feel. It is simplistic and singular in constructing its webbed world. Installation view, Christian Marclay: Doors, the Institute of Contemporary Art/Boston, 2025. (Mel Taing) But what exactly are we to take away from this world? In an interview with Artforum, Marclay declares, “I’m building in people’s minds an architecture in which to get lost.” The clip evokes a certain act of labyrinthian mapping—or perhaps a mode of perpetual resetting. I began to imagine this almost as a non-Euclidean enfilade of sorts where each room invites you to quickly grasp a new environment and then very quickly anticipate what may be in the next. With the understanding that you can’t backtrack, and the unpredictability of the next door taking you anywhere, the film holds you in total suspense. The production of new spaces and new architecture is activated all at once in the moment someone steps into a new doorway. All of this is without even mentioning the chosen films themselves. There is a degree to which the pop-culture element of Marclay’s work makes certain moments click—I can’t help but laugh as I watch Adam Sandler in Punch Drunk Love exit a door and emerge as Bette Davis in All About Eve. But to a degree, I also see the references being secondary, and certainly unneeded to understand the visceral experience Marclay crafts. It helps that, aside from a couple of jarring character movements or one-off spoken jokes, the movement is repetitive and universal. Doors runs on a continuous loop. I sat watching for just under an hour before convincing myself that I would never find any appropriate or correct time to leave. Instead, I could sit endlessly and reflect on each character movement, each new reveal of a room. Is the door the most important architectural element in creating space? Marclay makes a strong case for it with this piece. Harish Krishnamoorthy is an architectural and urban designer based in Cambridge, Massachusetts, and Bangalore, India. He is an editor at PAIRS.

Meta is looking to up its weakening AI game with a key talent grab. Following days of speculation, the social media giant has confirmed that Scale AI’s founder and CEO, Alexandr Wang, is joining Meta to work on its AI efforts. Meta will invest $14.3 billion in Scale AI as part of the deal, and will have a 49% stake in the AI startup, which specializes in data labeling and model evaluation services. Other key Scale employees will also move over to Meta, while CSO Jason Droege will step in as Scale’s interim CEO. This move comes as the Mark Zuckerberg-led company goes all-in on building a new research lab focused on “superintelligence,” the next step beyond artificial general intelligence (AGI). The arrangement also reflects a growing trend in big tech, where industry giants are buying companies without really buying them — what’s increasingly being referred to as “acqui-hiring.” It involves recruiting key personnel from a company, licensing its technology, and selling its products, but leaving it as a private entity. “This is fundamentally a massive ‘acqui-hire’ play disguised as a strategic investment,” said Wyatt Mayham, lead AI consultant at Northwest AI Consulting. “While Meta gets Scale’s data infrastructure, the real prize is Wang joining Meta to lead their superintelligence lab. At the $14.3 billion price tag, this might be the most expensive individual talent acquisition in tech history.” Closing gaps with competitors Meta has struggled to keep up with OpenAI, Anthropic, and other key competitors in the AI race, recently even delaying the launch of its new flagship model, Behemoth, purportedly due to internal concerns about its performance. It has also seen the departure of several of its top researchers.  “It’s not really a secret at this point that Meta’s Llama 4 models have had significant performance issues,” Mayham said. “Zuck is essentially betting that Wang’s track record building AI infrastructure can solve Meta’s alignment and model quality problems faster than internal development.” And, he added, Scale’s enterprise-grade human feedback loops are exactly what Meta’s Llama models need to compete with ChatGPT and Claude on reliability and task-following. Data quality, a key focus for Wang, is a big factor in solving those performance problems. He wrote in a note to Scale employees on Thursday, later posted on X (formerly Twitter), that when he founded Scale AI in 2016 amidst some of the early AI breakthroughs, “it was clear even then that data was the lifeblood of AI systems, and that was the inspiration behind starting Scale.” But despite Meta’s huge investment, Scale AI is underscoring its commitment to sovereignty: “Scale remains an independent leader in AI, committed to providing industry-leading AI solutions and safeguarding customer data,” the company wrote in a blog post. “Scale will continue to partner with leading AI labs, multinational enterprises, and governments to deliver expert data and technology solutions through every phase of AI’s evolution.” Allowing big tech to side-step notification But while it’s only just been inked, the high-profile deal is already raising some eyebrows. According to experts, arrangements like these allow tech companies to acquire top talent and key technologies in a side-stepping manner, thus avoiding regulatory notification requirements. The US Federal Trade Commission (FTC) requires mergers and acquisitions totaling more than $126 million be reported in advance. Licensing deals or the mass hiring-away of a company’s employees don’t have this requirement. This allows companies to move more quickly, as they don’t have to undergo the lengthy federal review process. Microsoft’s deal with Inflection AI is probably one of the highest-profile examples of the “acqui-hiring” trend. In March 2024, the tech giant paid the startup $650 million in licensing fees and hired much of its team, including co-founders Mustafa Suleyman (now CEO of Microsoft AI) and Karén Simonyan (chief scientist of Microsoft AI). Similarly, last year Amazon hired more than 50% of Adept AI’s key personnel, including its CEO, to focus on AGI. Google also inked a licensing agreement with Character AI and hired a majority of its founders and researchers. However, regulators have caught on, with the FTC launching inquiries into both the Microsoft-Inflection and Amazon-Adept deals, and the US Justice Department (DOJ) analyzing Google-Character AI. Reflecting ‘desperation’ in the AI industry Meta’s decision to go forward with this arrangement anyway, despite that dicey backdrop, seems to indicate how anxious the company is to keep up in the AI race. “The most interesting piece of this all is the timing,” said Mayham. “It reflects broader industry desperation. Tech giants are increasingly buying parts of promising AI startups to secure key talent without acquiring full companies, following similar patterns with Microsoft-Inflection and Google-Character AI.” However, the regulatory risks are “real but nuanced,” he noted. Meta’s acquisition could face scrutiny from antitrust regulators, particularly as the company is involved in an ongoing FTC lawsuit over its Instagram and WhatsApp acquisitions. While the 49% ownership position appears designed to avoid triggering automatic thresholds, US regulatory bodies like the FTC and DOJ can review minority stake acquisitions under the Clayton Antitrust Act if they seem to threaten competition. Perhaps more importantly, Meta is not considered a leader in AGI development and is trailing OpenAI, Anthropic, and Google, meaning regulators may not consider the deal all that concerning (yet). All told, the arrangement certainly signals Meta’s recognition that the AI race has shifted from a compute and model size competition to a data quality and alignment battle, Mayham noted. “I think the [gist] of this is that Zuck’s biggest bet is that talent and data infrastructure matter more than raw compute power in the AI race,” he said. “The regulatory risk is manageable given Meta’s trailing position, but the acqui-hire premium shows how expensive top AI talent has become.”

In a previous article, we looked at some practical examples of how to code SVG by hand. In that guide, we covered the basics of the SVG elements rect, circle, ellipse, line, polyline, and polygon (and also g). This time around, we are going to tackle a more advanced topic, the absolute powerhouse of SVG elements: path. Don’t get me wrong; I still stand by my point that image paths are better drawn in vector programs than coded (unless you’re the type of creative who makes non-logical visual art in code — then go forth and create awe-inspiring wonders; you’re probably not the audience of this article). But when it comes to technical drawings and data visualizations, the path element unlocks a wide array of possibilities and opens up the world of hand-coded SVGs. The path syntax can be really complex. We’re going to tackle it in two separate parts. In this first installment, we’re learning all about straight and angular paths. In the second part, we’ll make lines bend, twist, and turn. Required Knowledge And Guide Structure Note: If you are unfamiliar with the basics of SVG, such as the subject of viewBox and the basic syntax of the simple elements (rect, line, g, and so on), I recommend reading my guide before diving into this one. You should also familiarize yourself with <text> if you want to understand each line of code in the examples. Before we get started, I want to quickly recap how I code SVG using JavaScript. I don’t like dealing with numbers and math, and reading SVG Code with numbers filled into every attribute makes me lose all understanding of it. By giving coordinates names and having all my math easy to parse and write out, I have a much better time with this type of code, and I think you will, too. The goal of this article is more about understanding path syntax than it is about doing placement or how to leverage loops and other more basic things. So, I will not run you through the entire setup of each example. I’ll instead share snippets of the code, but they may be slightly adjusted from the CodePen or simplified to make this article easier to read. However, if there are specific questions about code that are not part of the text in the CodePen demos, the comment section is open. To keep this all framework-agnostic, the code is written in vanilla JavaScript (though, really, TypeScript is your friend the more complicated your SVG becomes, and I missed it when writing some of these). Setting Up For Success As the path element relies on our understanding of some of the coordinates we plug into the commands, I think it is a lot easier if we have a bit of visual orientation. So, all of the examples will be coded on top of a visual representation of a traditional viewBox setup with the origin in the top-left corner (so, values in the shape of 0 0 ${width} ${height}. I added text labels as well to make it easier to point you to specific areas within the grid. Please note that I recommend being careful when adding text within the <text> element in SVG if you want your text to be accessible. If the graphic relies on text scaling like the rest of your website, it would be better to have it rendered through HTML. But for our examples here, it should be sufficient. So, this is what we’ll be plotting on top of: See the Pen SVG Viewbox Grid Visual [forked] by Myriam. Alright, we now have a ViewBox Visualizing Grid. I think we’re ready for our first session with the beast. Enter path And The All-Powerful d Attribute The <path> element has a d attribute, which speaks its own language. So, within d, you’re talking in terms of “commands”. When I think of non-path versus path elements, I like to think that the reason why we have to write much more complex drawing instructions is this: All non-path elements are just dumber paths. In the background, they have one pre-drawn path shape that they will always render based on a few parameters you pass in. But path has no default shape. The shape logic has to be exposed to you, while it can be neatly hidden away for all other elements. Let’s learn about those commands. Where It All Begins: M The first, which is where each path begins, is the M command, which moves the pen to a point. This command places your starting point, but it does not draw a single thing. A path with just an M command is an auto-delete when cleaning up SVG files. It takes two arguments: the x and y coordinates of your start position. const uselessPathCommand = `M${start.x} ${start.y}`; Basic Line Commands: M , L, H, V These are fun and easy: L, H, and V, all draw a line from the current point to the point specified. L takes two arguments, the x and y positions of the point you want to draw to. const pathCommandL = `M${start.x} ${start.y} L${end.x} ${end.y}`; H and V, on the other hand, only take one argument because they are only drawing a line in one direction. For H, you specify the x position, and for V, you specify the y position. The other value is implied. const pathCommandH = `M${start.x} ${start.y} H${end.x}`; const pathCommandV = `M${start.x} ${start.y} V${end.y}`; To visualize how this works, I created a function that draws the path, as well as points with labels on them, so we can see what happens. See the Pen Simple Lines with path [forked] by Myriam. We have three lines in that image. The L command is used for the red path. It starts with M at (10,10), then moves diagonally down to (100,100). The command is: M10 10 L100 100. The blue line is horizontal. It starts at (10,55) and should end at (100, 55). We could use the L command, but we’d have to write 55 again. So, instead, we write M10 55 H100, and then SVG knows to look back at the y value of M for the y value of H. It’s the same thing for the green line, but when we use the V command, SVG knows to refer back to the x value of M for the x value of V. If we compare the resulting horizontal path with the same implementation in a <line> element, we may Notice how much more efficient path can be, and Remove quite a bit of meaning for anyone who doesn’t speak path. Because, as we look at these strings, one of them is called “line”. And while the rest doesn’t mean anything out of context, the line definitely conjures a specific image in our heads. <path d="M 10 55 H 100" /> <line x1="10" y1="55" x2="100" y2="55" /> Making Polygons And Polylines With Z In the previous section, we learned how path can behave like <line>, which is pretty cool. But it can do more. It can also act like polyline and polygon. Remember, how those two basically work the same, but polygon connects the first and last point, while polyline does not? The path element can do the same thing. There is a separate command to close the path with a line, which is the Z command. const polyline2Points = M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y}; const polygon2Points = M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y} Z; So, let’s see this in action and create a repeating triangle shape. Every odd time, it’s open, and every even time, it’s closed. Pretty neat! See the Pen Alternating Triangles [forked] by Myriam. When it comes to comparing path versus polygon and polyline, the other tags tell us about their names, but I would argue that fewer people know what a polygon is versus what a line is (and probably even fewer know what a polyline is. Heck, even the program I’m writing this article in tells me polyline is not a valid word). The argument to use these two tags over path for legibility is weak, in my opinion, and I guess you’d probably agree that this looks like equal levels of meaningless string given to an SVG element. <path d="M0 0 L86.6 50 L0 100 Z" /> <polygon points="0,0 86.6,50 0,100" /> <path d="M0 0 L86.6 50 L0 100" /> <polyline points="0,0 86.6,50 0,100" /> Relative Commands: m, l, h, v All of the line commands exist in absolute and relative versions. The difference is that the relative commands are lowercase, e.g., m, l, h, and v. The relative commands are always relative to the last point, so instead of declaring an x value, you’re declaring a dx value, saying this is how many units you’re moving. Before we look at the example visually, I want you to look at the following three-line commands. Try not to look at the CodePen beforehand. const lines = [ { d: `M10 10 L 10 30 L 30 30`, color: "var(--_red)" }, { d: `M40 10 l 0 20 l 20 0`, color: "var(--_blue)" }, { d: `M70 10 l 0 20 L 90 30`, color: "var(--_green)" } ]; As I mentioned, I hate looking at numbers without meaning, but there is one number whose meaning is pretty constant in most contexts: 0. Seeing a 0 in combination with a command I just learned means relative manages to instantly tell me that nothing is happening. Seeing l 0 20 by itself tells me that this line only moves along one axis instead of two. And looking at that entire blue path command, the repeated 20 value gives me a sense that the shape might have some regularity to it. The first path does a bit of that by repeating 10 and 30. But the third? As someone who can’t do math in my head, that third string gives me nothing. Now, you might be surprised, but they all draw the same shape, just in different places. See the Pen SVG Compound Paths [forked] by Myriam. So, how valuable is it that we can recognize the regularity in the blue path? Not very, in my opinion. In some cases, going with the relative value is easier than an absolute one. In other cases, the absolute is king. Neither is better nor worse. And, in all cases, that previous example would be much more efficient if it were set up with a variable for the gap, a variable for the shape size, and a function to generate the path definition that’s called from within a loop so it can take in the index to properly calculate the start point. Jumping Points: How To Make Compound Paths Another very useful thing is something you don’t see visually in the previous CodePen, but it relates to the grid and its code. I snuck in a grid drawing update. With the method used in earlier examples, using line to draw the grid, the above CodePen would’ve rendered the grid with 14 separate elements. If you go and inspect the final code of that last CodePen, you’ll notice that there is just a single path element within the .grid group. It looks like this, which is not fun to look at but holds the secret to how it’s possible: <path d="M0 0 H110 M0 10 H110 M0 20 H110 M0 30 H110 M0 0 V45 M10 0 V45 M20 0 V45 M30 0 V45 M40 0 V45 M50 0 V45 M60 0 V45 M70 0 V45 M80 0 V45 M90 0 V45" stroke="currentColor" stroke-width="0.2" fill="none"></path> If we take a close look, we may notice that there are multiple M commands. This is the magic of compound paths. Since the M/m commands don’t actually draw and just place the cursor, a path can have jumps. So, whenever we have multiple paths that share common styling and don’t need to have separate interactions, we can just chain them together to make our code shorter. Coming Up Next Armed with this knowledge, we’re now able to replace line, polyline, and polygon with path commands and combine them in compound paths. But there is so much more to uncover because path doesn’t just offer foreign-language versions of lines but also gives us the option to code circles and ellipses that have open space and can sometimes also bend, twist, and turn. We’ll refer to those as curves and arcs, and discuss them more explicitly in the next article. Further Reading On SmashingMag “Mastering SVG Arcs,” Akshay Gupta “Accessible SVGs: Perfect Patterns For Screen Reader Users,” Carie Fisher “Easy SVG Customization And Animation: A Practical Guide,” Adrian Bece “Magical SVG Techniques,” Cosima Mielke

The name, the myth, the icon: Barbie is almost synonymous with pink, the specific hues of the time responding to cultural trends across the decades. The doll – created by Ruth Handler in 1959, and distributed and produced by Mattel – has reflected and also shaped decades of American culture. Bauhaus-inspired, Barbie and HEWI have collaborated to present the Barbie x HEWI sanitaryware collection, bathed in an approachable yet sophisticated shade of pink. With a focus on celebrating individuality the Barbie way, HEWI fosters a precedent of inclusive design for bathrooms at large, ushering in a new era where all are safe and welcome. HEWI continues to set new standards in bathroom and accessory design for almost one hundred years. Their iconic extruded door handle has extended to every facet of the bathroom, including a towel bar, shower seat, soap dish, and toilet roll holder, offering everything you might need if your bathroom needs a bit of brightness. A lovely shade of light pink accented with an approachable cream color allows the Barbie x HEWI collection to fit in with existing decor, palette incredibly important in a room made for washing and cleanliness. With a satisfying thickness sometimes absent from bathroom collections, each piece receives the signature HEWI finish, glossy and made to last even through the toughest bath times. Barbie has been an integral part of our culture for over 65 years, offering a new perspective about what professions the doll could take part in and the roles she could play. In more recent years, inclusion has been a priority for the brand, choosing a more natural silhouette and featuring a more accurate and diverse picture of who Barbie and her friends could be. Here, this energy extends to the restroom, where the iconic Barbie pink meets the bold, Bauhaus silhouette of HEWI designs. HEWI has been at the forefront of product design for over 90 years, challenging themselves and others to anticipate the needs of subsequent generations. With work in healthcare, public projects, hotels, and education, HEWI strives to continue to push the boundaries of materials technology, closing loops on their production processes with projects like the Re-seat collection, made out of offcuts from injection molding. To learn more about the Barbie x HEWI sanitaryware collection, please visit barbiexhewi.com.  Imagery courtesy of HEWI.