# How I Created Neule.art

DevFeed: [How I Created Neule.art](<https://devfeed.tech/articles/how-i-created-neule-art-38443.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2022-06-30/how-i-created-neule-art/>)

Author: Eevis Panula

Published: 2024-11-03T12:00:49.100000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Eleventy](<https://devfeed.tech/topics/eleventy.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [static-site-generator](<https://devfeed.tech/topics/static-site-generator.md>), [Forms](<https://devfeed.tech/topics/forms.md>), [Serverless](<https://devfeed.tech/topics/serverless.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [blog-post](<https://devfeed.tech/tags/blog-post.md>), [eleventy](<https://devfeed.tech/tags/eleventy.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [serverless](<https://devfeed.tech/tags/serverless.md>), [static-site-generator](<https://devfeed.tech/tags/static-site-generator.md>), [svg](<https://devfeed.tech/tags/svg.md>)

## AI overview

This article explains the creation of Neule.art, a color picker and visualizer for Riddari sweaters and other knitting patterns. It discusses using SVG for color visualization and choosing Eleventy, Eleventy Serverless, and HTML forms to build the site with minimal or no client-side JavaScript.

## Source excerpt

I'm a knitter. It's one way of expressing my creativity and also passing the time. And it's sometimes super relaxing. And I (and people around me) get to wear some nice, warm, self-made garments. One ongoing project is that I'm knitting some Riddari-sweaters as presents to some of my close ones when they turn 30. Usually, I've just decided on the colors myself, but this time I wanted to ask from the recipient for their color choice. So, I could have tried to find some pictures of the sweater in potential colors. But there was a chance that I couldn't find those. And it takes some imagination to try to think how some colors play together if you only see a picture of the yarn ball and the sweater in random color. Trust me; I've bought some new yarn in the middle of making a sweater because what I was knitting was not what I had imagined. I needed a way of visualizing the colors somehow. And thus, the idea for my next project was born. In this blog post, I'll introduce you to Neule.art, a color picker or color visualizer for the Riddari sweater (among other patterns), and how I created it. If you're interested in the code, you can find it from the Neule.art repository. The code is nowhere perfect, and I know I could polish it a lot, but my goal has been just to get it out and then, maybe at some point, improve the code quality. The Planning and Decisions So, I began pondering how to create this site or app. I instantly started thinking about using SVGs for the visualization, as you can manipulate the colors of an SVG pretty straightforwardly. Another thing to decide on was the technologies. What should I use? React? NextJS? Something else? I wanted to build a page with the least possible amount of JavaScript, so I decided to go with Eleventy. That's a framework I've used before, and my website, for example, is built on Eleventy. I'm a bit bored with JavaScript and wanted to try if I could build the site without any client-side JS. As Eleventy is a static site generator